在画布上画画

所以我想在我创建的画布上画画，让我向你展示我的Javascript代码，我会解释发生了什么：

我有两个画布，一个有一个正方形50X50，总是跟在鼠标后面，另一个我想用它来画画。到目前为止，这是可行的，但我希望能够拖动鼠标并继续画画，而不是每次我想画画时都点击鼠标。

function start(){
var canvas_hover_tmp = document.getElementById('canvas_hover');
canvas_hover = canvas_hover_tmp.getContext('2d');
var canvas_click_tmp = document.getElementById('canvas_draw');
canvas_click = canvas_click_tmp.getContext('2d');
window.addEventListener('mousemove', moved, false); //move square with mouse on mouse move
window.addEventListener('mousedown', draw, false); //draw square to canvas at specific location from where mouse is
}  

这个函数只获取我想要使用的画布并设置它们，然后调用事件侦听器，一个跟随鼠标，一个单击并拖动并绘制

function moved(pos){
canvas_hover.clearRect(0,0,1000,600);
var x = pos.clientX;
var y = pos.clientY;
canvas_hover.fillRect(x-25, y-25,50,50);    
}

这个功能允许我悬停一个框，它用鼠标悬停

function draw(draw_pos){
var x = draw_pos.clientX;
var y = draw_pos.clientY;
canvas_click.fillRect(x-25,y-25,50,50);
 }

这是一个根据鼠标所在的位置绘制到画布上特定位置的函数，我可以单击它，它会绘制一个正方形，但我不能像我希望的那样向下单击并拖动并继续绘制。我该怎么做？

 window.addEventListener('load', drawRect, false); //call first function start

我尝试过设置一个名为draw = 1的变量，当它等于1时，意味着继续绘制，当0停止时。但我把它放在一个while循环中，所发生的只是页面崩溃。

我在CSS3中设置了这两个画布，以便相互叠加。

很抱歉，如果这让人困惑，我不知道如何使用这个

任何帮助都会很棒，

感谢：）