Drawing on a canvas

Question

So I want to be able to draw onto this canvas I created, let me show you my Javascript code and i'll explain whats happening:

I have two canvas's, one that has a square 50X50 always following the mouse, and another that i want to use to draw on. So far this works, but i want to be able to drag the mouse and continue to draw, instead of clicking the mouse every time i want to draw.

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
}  

This function just gets the canvas's i want to use and sets them up, i then call event listeners, one to follow the mouse and one to click down and drag and draw

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

This function allows me to hover a box, it hovers with the mouse

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

This is the function that draws onto the canvas at a specific location according to where the mouse is, I can click and it will draw a square but i can't click down and drag and continue the drawing, as i would like. How can i do that?

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

I have tried setting a variable called draw = 1 and when it equals one that means continue drawing and when 0 stop. But i put it in a while loop and all that happens is the page crashes.

I have these two canvas's set up in CSS3 to overlay each other.

Sorry if this is confusing, i wasn't sure how to word this

Any help would be awesome,

Thanks :)

Answer 1

Your "setting variable" approach is right. You want to draw as long as the mouse button is hold, so you have to listen on mousedown , mousemove and mouseup and introduce some global variable (say drawOnSecond for "draw on second layer"):

//move square with mouse on mouse move
window.addEventListener('mousemove', moved, false);

//draw square to canvas at specific location from where mouse is
//you shouldn't drop this listener, as this would prevent drawing via clicking
window.addEventListener('mousedown', draw, false);

// enable/disable drawing while moving the mouse
window.addEventListener('mousedown', enableDraw, false); 
window.addEventListener('mouseup', disableDraw, false); // disable

Then you have to adjust your moved function a little bit and implement enableDraw/disableDraw:

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);
    if(drawOnSecond) // <<---- global variable, default false
        draw(pos);
}

function enableDraw(){
    drawOnSecond = true;
}

function disableDraw(){
    drawOnSecond = false;
}

JSFiddle