Canvas création d'objet en mousedown/up

Bonjour,

j'ai comme projet de créer une sorte de paint sous canvas.
Dans ce paint j'ai des rectangles, qui vont se faire en deux cliques de souris : le premier définit le départ et le deuxième l 'arrivée et construit le rectangle selon ses coordonnées.



Maintenant j'essaie de construire celui-ci sans faire ces cliques, en gros quand j'appuie sur la souris je vais choisir le point de départ, et le point d'arrivée selon le moment ou je relâche la souris, donc avec les event mousedown et mouseup, mais j'ai vraiment du mal à les mettre en place.



Voici ma fonction(appelée par un onclick) qui crée le rectangle :

function rectangle(el,event){
rect.push(event.clientX, event.clientY);
canvas.beginPath();
canvas.strokeStyle=$color;
canvas.lineWidth = $size;
if(rect.length == 4){
largeur = rect[2] - rect[0]- (canvas.lineWidth) ;
longeur = rect[3] - rect[1]- (canvas.lineWidth) ;
canvas.rect(rect[0],rect[1],largeur,longeur);
canvas.stroke();
rect = [];
}
}

rect est mon tableau en gros.
Si quelqu'un voit comment procéder et peut me mettre sur la voie