[This is part 3 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface.]

For part 3 of our exploration of HTML5 Canvas, I’m going to introduce you to a couple of additional ways to draw…the path APIs and the text APIs. Actually, if you’ve read part 2, you already met one of the important path APIs, namely context.arc, which provides the ability to draw circles (or portions of circles). But circles aren’t the only thing we can draw with paths…not by a long shot…

Starting a Path and Drawing a Line

There are a couple of things you’ll need to do before you actually start drawing with the path APIs. The first is to move the starting point for your path to where you want it using context.moveTo():

    context.moveTo(50, 50);

Here, I move the drawing context to 50 pixels right, and 50 pixels down from the upper left corner of the canvas element. Now, I can start drawing. The simplest drawing API is for drawing straight lines, context.lineTo():

    context.lineTo(150, 150);

Here, I’m drawing a straight line from the origin set by moveTo to a point at 150 pixels right and 150 pixels down from the upper left corner of the element. But I’m not quite done. In order to actually render the line, I need to call context.stroke():

    context.stroke();

The result is a serviceable, if unspectacular, diagonal straight line:

Now, that line is a little on the thin size, so let’s beef it up, shall we? A simple call to context.lineWidth prior to drawing the line will work swimmingly, and while we’re at it, we can use the context.lineCap API to make the ends of the line rounded rather than the default square (butt) end:

   1:  context.lineWidth = 5;

   2:  context.lineCap = "round";

Zoom in to 400%, and you can clearly see how the lineCap API has rounded the end of our line:

Next, we’ll add a couple more lines to make a triangle:

   1:  context.moveTo(50, 50);

   2:  context.lineTo(150, 150);

   3:  context.lineTo(150, 50);

   4:  context.lineTo(50, 50);

   5:  context.stroke();

And we’ll also add a call to context.lineJoin to ensure our joins match our caps, and for fun we’ll fill the triangle with red…here’s the full rendering code so far:

   1:  context.lineWidth = 5;

   2:  context.lineCap = "round";

   3:  context.lineJoin = "round";

   4:  context.moveTo(50, 50);

   5:  context.lineTo(150, 150);

   6:  context.lineTo(150, 50);

   7:  context.lineTo(50, 50);

   8:  context.stroke();

   9:  context.fillStyle = "#F00";

  10:  context.fill();

which gives us the following result:

So far, so good. But what if you want to draw something other than a straight line?

Drawing Arcs and Bezier Curves

We already saw in part 2 how to use the arc API to draw circle shapes, but sometimes you need more than just a circle (or part of one). Suppose instead of all straight lines for our triangle above, we want to make one side curved? We could use the context.quadraticCurveTo or context.bezierCurveTo APIs to draw a curve instead of one of the straight lines, like so:

   1:  context.lineWidth = 5;

   2:  context.lineCap = "round";

   3:  context.lineJoin = "round";

   4:  context.moveTo(50, 50);

   5:  context.bezierCurveTo(50,50, 150,50, 150,150);

   6:  //context.lineTo(150, 150);

   7:  context.lineTo(150, 50);

   8:  context.lineTo(50, 50);

   9:  context.stroke();

  10:  context.fillStyle = "#F00";

  11:  context.fill();

Above, we’ve replaced the code that previously drew the diagonal line with a call to bezierCurveTo. This API starts drawing at the location specified by the previous line’s call to moveTo, and ends at 150, 150, the value of the last 2 parameters. The first two parameters are the X and Y coordinates of the 2 bezier curve control points, in this case, 50, 50 and 150, 50, which gives us the following output:

The only difference between bezierCurveTo and quadraticCurveTo is that the latter only has one control point, rather than two.

Additional Path APIs

I’m not going to show full examples of each and every API for drawing paths and shapes, but here are a few more you may want to be aware of (there’s a pretty good reference for the Canvas APIs available over at W3Schools, where you can get more info):

• context.beginPath() – begins a new path or clears the current path.
  • context.closePath() – closes the current path.
    • context.clip() – creates a clipping area using the current path or shape information. Only pixels within the clipping area will be visible after calling this function.

      • context.clearRect(x, y, width, height) – clears a rectangular space matching the provided x and y origin and width and height, removing all pixels. Useful for clearing only a portion of the canvas.

        • arcTo(x1, y1, x2, y2, radius) – draws an arc between two specified points of the specified radius.

      Drawing Text

      One very positive thing about drawing text with the canvas APIs is that it’s very simple, and can take as little as one line of code:

      context.strokeText("Hello, Canvas!", 50, 150);