$(document).ready(function(){ var painting = false; $("#canvas").mousedown(function(){ painting = true; }); $("#canvas").mouseup(function(){ painting = false; }); $("#canvas").mousemove(function(evt){ $("#info").html("painting: " + painting); if(painting){ var mouseX = evt.pageX; var mouseY = evt.pageY; paint (mouseX, mouseY); } }); function paint(x, y){ var canvasX = $("#canvas").offset().left; var canvasY = $("#canvas").offset().top; var ctx = $("#canvas").get(0).getContext("2d"); ctx.fillStyle = "rgb(10,10,10)"; ctx.fillRect(x-canvasX-5, y-canvasY-5, 5, 5); } });
<div id="wrap"> <canvas id="canvas" width="300" height="150"> <p>Ha ha! you looser! your poor browser doesn't support HTML5 xD</p> </canvas> </div> <p id="info"></p>
#canvas { border: 5px solid #D6D6D6; cursor: pointer; }