HTML5 Simple Draw Board

HTML5 Simple Draw Board – During our brain storming session a question just popped out regarding HTML5 canvas element so i thought i should have create some app to show the demo of HTML5 canvas property . here is the simple demo

Canvas is a brilliant property in html5 where user can draw with many more options like gradient , colours brushes and many more .

<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
var canvas = document.getElementById('canvas');
var context = null;
var gradient = null;
//context.clearRect = to remove from canvas
if(canvas.getContext)
{

context = canvas.getContext('2d');

$('#canvas').mousedown(function( evt ){

var offset = $('#canvas').offset();
context.beginPath();
context.moveTo(evt.pageX - offset.left,evt.pageY-offset.top);
$(document).mousemove(function(evt){
var offset = $('#canvas').offset();
context.lineTo(evt.pageX - offset.left,evt.pageY-offset.top);
context.lineWidth=10;
context.stroke();
}).mouseup(function(){
$(document).unbind('mousemove');
$(document).unbind('mouseup');
});

});

}else{
alert('canvas does not support');

}

});
</script>
<canvas id="canvas" width="300" height="250"
 style="border:1px solid #d3d3d3;"></canvas>

</body>
</html>

Most of the element are self explanatory

for drawing purpose i used jquery functions like mousedown(), mousemove() and mouseup().