Drawing Canvas non funzionante

[Francoiky]

I quadrati risultano spostati perché in:

context.fillRect(mouseX,mouseY,10,10)

dovrebbe essere *(mouseX - 5, mouseY - 5, 10, 10). Il codice non l'ho "ottimizzato", era solo per provare.

P.S.: mi spieghi questo passaggio?

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 );
}

Comunque, grazie

EDIT:
non avevo capito in che senso "spostati"
Questo succede perchè non ho regolato il rapporto tra le coordinate del mouse (che sono rispetto allo schermo) e quelle del quadrato da disegnare nel canvas (che sono rispetto al canvas stesso). Come detto prima il codice è solo di prova... una volta riuscito a farlo funzionare sarei passato ad ottimizzarlo.