Building a drawing app with HTML5's canvas- Connecting the dots (Part 3)

In the previous post, we noticed that if we moved the mouse too fast, the dots would be separated. This is probably not the functionality that we want for our app. In this post, we'll fix that and then we'll be able to draw smooth lines.

Our final product at the end of this series

View Demo

Well, here's the idea: We simply draw a line between every dot that we draw using our pt function and the previously drawn dot. But instead of using a variable to keep track of the previously drawn point. We'll use the path drawing capability of canvases...

Paths in canvases

To understand this, just imaging something called a "turtle", that simple moves wherever you ask it to and draws to wherever you ask it to...

Now, we tell the turtle to go to a point using the canvas.moveTo() function which takes in 2 parameters, i.e. the x and y coordinates of the point that we want the turtle to move to.

However, it just moves to that point, it doesn't draw a line. To draw a line we use the lineTo function which works similar to the moveTo function except that it draws a line instead of just moving.

If you notice, we don't specify the starting location of the point because the turtle automatically remembers the previous point where we drew. 

To make the turtle forget the previous path, we use the context.beginPath function.

Using paths to solve our problem

NOTE: All the stuff that we'll be doing in this tutorial will be within the if statement in the pt function unless otherwise stated.

Now, all we have to do is, call the lineTo function (to the current point) at the starting of the if block before drawing our point using the arc function. We then call the stroke method to actually draw the line.

However, this line will be just a pixel wide. We want it to be as wide as the circles themselves, right? Well, what is the width of the circle? It's just the diameter or radius*2, right?

So before calling the lineTo function just set the context.lineWidth property to radius*2.

After we draw the point (the code from the previous post), we simply start a new path using the beginPath function and tell the turtle to move to the current point.

The above para might not make sense to you but it just makes the turtle forget the previous points so that it doesn't overdraw...

So, here's what our code looks like (the bold & italics code is the one we wrote in this series and the normal code is from the previous tutorial)

var pt = function(e){
    if(m_down){
        context.lineWidth=20;
        context.lineTo(e.offsetX, e.offsetY);
        context.stroke();
        context.beginPath();
        context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
        context.fill();
        context.beginPath();
        context.moveTo(e.offsetX, e.offsetY);       
    }
}

Breaking line continuity

If you've tried the code thus far, you would have noticed that when you leave the mouse and start a line somewhere else, the new line continues from the previous line. In other words, a line is drawn from the point where you lifted your mouse to the new point automatically.

Well, why does this happen? Simple because at the end of the pt function we as the turtle to move to the current point so when we start drawing from somewhere else, the line is continued from there.

In order to fix this problem, all we have to do is break the path and tell the turtle to begin a new path each time the mouse is lifted. You guessed it, we're simply going to call the beginaPath function when the mouse is lifted, i.e. in the up() function that handles the mouse lifted event.

var up = function(e){
    m_down = false;
    context.beginPath(); // Start a new path and break the old one
}

Future work

Now we have a perfectly working drawing app that can draw smooth lines. However, it isn't work calling an "app" when we can't do cool stuff like changing brush size, brush colour or saving the image after we're done drawing it.

We'll do all of that cool stuff in the upcoming tutorials, until then, goodbye!

Note:

Okay, this post was published on 25th of July, 2014. Today (3rd of September, 2014) I would like to update you that there's a new series that I'm working on called "HTML5- Mastering the canvas element"

In this series, a tutorial called Custom shapes etc. Paths I've explained paths in detail.