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().
Categories:
html5
View Comments
Comment or Ask a Question
Quick Links