CODEWITHSUNDEEP
javascripthtmlcss
Jacob
Jacob

Reputation: 1459

Drawing on a canvas

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 :)

Upvotes: 1

Views: 630

Answers (1)

Zeta
Zeta

Reputation: 105876

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

Upvotes: 1

Related Questions