Create Circles with jQuery and CSS3

Here is a small script to use divs as Canvas

This is a small script which allows you to create a circle using as little code as possible to allow the script performance excel.

Some browsers may not comply with <canvas> tag, hence is the need for this script.

If you should need a square or a rectangle with or without rounded borders, you can still use this script, and adjust the border-radius CSS attribute.
Hope you like it guys.

DEMO

Start drawing something on the black board.

Should this not work… please see http://jsfiddle.net/8skUy/21/ and copy and paste the code from there Image may be NSFW.
Clik here to view.

HTML

<div id="myid"></div>

CSS

 #myid{
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: block;
    height: 1000px;
    margin: 3%;
    position: relative;
    text-indent: -1100px;
}

jQuery

var offseter={left:0,top:0};
var isDown=false;
var $is = 'circle';
var $reset= false;
$('input').click(function (){
    if($(this).is(':checked')) $reset = true;
    else $reset = false;
});
$('a').click(function (){
    $(this).addClass('selected').siblings('a').removeClass('selected');
    $is = $(this).attr('id');
});
$('#myid')
.css('position','relative')
.unbind().die()
.bind('selectstart dragstart', function(evt){
  evt.preventDefault();
  return false;
})
.bind('mousemove mouseover',function (e){
    if(!isDown)return false;
    $(this).children('.frame').remove();
    var top = parseInt(e.pageY)-$(this).offset().top;
    var left= parseInt(e.pageX)-$(this).offset().left;
    var t= top-offseter.top;
    var l= left-offseter.left;
    var radius = $is=='circle'?l*2+t*2:0;
    var pixel= $('
')
    .css({
        height:(top-offseter.top),
        width: (left-offseter.left),
        border: '1px solid #fff',
        background: 'red',
        position:'absolute',
        top: offseter.top,
        left: offseter.left,
        'border-radius': radius
    });
    $(this).append(pixel);
})
.bind('mousedown',function (e){
  e.stopPropagation();
  isDown= true;
  if($reset) $(this).children().remove()
  var top = parseInt(e.pageY)-$(this).offset().top;
  var left= parseInt(e.pageX)-$(this).offset().left;
  offseter = {top:top,left:left};
  var pixel= $('
')
    .css({
        width:1,height:1,
        background:'#fff',
        top:top,left:left
    });
  $(this).append(pixel);
}).bind('mouseup',function (e){
  isDown=false;
  $(this).children('.frame').remove();
  e.stopPropagation();
  var top = parseInt(e.pageY)-$(this).offset().top;
  var left= parseInt(e.pageX)-$(this).offset().left;
  var t= top-offseter.top;
  var l= left-offseter.left; 
  var radius = $is=='circle'?l*2+t*2:0;
  var pixel= $('
')
    .css({
        width:l,height:t,
        background: '#fff',
        position:'absolute',
        top: offseter.top, left: offseter.left,
        'border-radius': radius
    });
    $(this).append(pixel);
})​;

Valtid Caushi