Building a drawing app with HTML5's canvas (Part 2)

In the previous part of this series, we learned to build an app that puts a point on the screen each time it is clicked. In this part, we'll extend that functionality to start drawing points when the mouse is dragged on the screen.

However, for this, we'll have to get rid of the event listener we wrote in the previous post and add new ones.

Also, the browsers don't provide event listeners for mouse drag, so we'll have to build it ourselves...

Our final product after all the parts!

View Demo

Building a mouse-drag event handler

Well, this is pretty easy, but before we do anything, please remove the event handler that we built in the previous post. Now, all we have to keep track of is whether or not the mouse button is down with the help of a boolean variable. We, then use a function that responds to the mouse move event, but tests if the button is down. So, this is what it looks like:

// A variable that keeps track of the mouse's button
var m_down = false;

var down = function(e){
    // We first set the m_down variable to true
    m_down = true;

    // Then we wan't to call our pt function to draw a point
    pt(e); // Don't forget to pass the e!
}

var up = function(e){
    m_down = false;
}

// Then we attach those functions with the canvas as event listeners
canvas.addEventListener("mousedown", down);
canvas.addEventListener("mouseup", up);

However, if you carefully think about what is happening, we're basically calling a function called down when the mouse button is pushed down that sets m_down to true and draws a point there. Then we call a function called up when the mouse button is released that basically sets m_up to true.

But, we aren't really drawing anything when the mouse is moving, right? We only handle events when the mouse is pushed down and released but not when it's moved.

So, let's go ahead and call the function pt when the mouse is moved. But, we have to draw not when the mouse is moved but when the mouse is pushed down and moved. For that purpose, we have a variable called m_down. So, let's just modify the pt function to test if m_down is true an then only draw the point.

var pt = function(e){
    // We test if the mouse is pressed and only then we draw the point
    if(m_down){
        context.beginPath();
        context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
        context.fill();
    }
}

// We call the pt function when the mouse is moving
canvas.addEventListener("mousemove", pt);

Oops! Our HTML5 canvas drawing app has a problem!

 If you use the app, it will give you results like this when you draw really fast:

Our points are far apart when we draw really fast!

And this can be a problem. We want to draw smooth curves and not such dotted lines.

I think, I'll leave that for the next part in this series, because I believe that you shouldn't stuff too much of mind boggling stuff into one tutorial as the human attention span is not that long.

So, see y'all in the next tutorial in this series!