codice:
<!DOCKTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas;
var mouseDown = 0;
var context;
var mouseX;
var mouseY;
function drawRect()
{
if (mouseDown == 1)
	{
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	context.fillRect(mouseX,mouseY,10,10);
	}
}
function getMousePosition(event)
{
	if (mouseDown == 1)
	{
	mouseX = event.offsetX;
	mouseY = event.offsetY;
	drawRect();
	}
}
initCanvas = function(){ 
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  context.width = context.width;
  context.canvas.addEventListener('mousedown' , function() { mouseDown = 1; },false );
  context.canvas.addEventListener('mousemove' , getMousePosition ,false );
  context.canvas.addEventListener('mouseup' ,   function() { mouseDown = 0; } ,false );
  context.canvas.addEventListener('mouseleave' ,   function() { mouseDown = 0; } ,false );
} 
</script>
</head>
<body style="background-color: grey;" onload='initCanvas()'>
<center>
<canvas id="canvas" style="width: 80%;height: 97%;border-style: ridge"></canvas>
<center>
</body>
</html>
Così scrive... però su chrome i quadrati risultano spostati... non so se sia un errore generico o solo di chrome quindi fammi sapere come va =)