Salve a tutti! Cercando di capire come funzioni il nuovo HTML5 mi sono imbattuto in un problema: queste poche righe di codice non funzionano e non capisco il perché. Qualcuno può aiutarmi?

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)
{
mouseX = event.screenX;
mouseY = event.screenY;
}
</script>
</head>
<body style="background-color: grey;">
<center>
<canvas id="canvas" style="width: 80%;height: 97%;border-style: ridge;" onmousedown="mouseDown = 1;" onmouseup="mouseDown = 0;" onmousemove="getMousePosition(event); drawRect();"></canvas>
<center>
</body>
</html>
Grazie in anticpo.