HTML5 Recipes: Paths

In this recipe, we shall look at how to draw different shapes using the Canvas API. The Canvas API gives us several methods via which we can draw a path. Think of the path as something of an outline for the shape that we want to draw.

There are several methods that we can use to define a particular path. All of these methods are available in the Canvas Context object. The general sequence of steps to draw any path are:

  1. Invoke beginPath() method
  2. Use any of the methods like MoveTo(), LineTo(), etc to draw your shape. Imagine the use of the methods as if you are using a pen/pencil on a paper and tracing your shape.
  3. Invoke the closePath() method to close or complete the shape. If the methods that you used in the above step complete the path, then closePath() method does nothing.
  4. Finally, invoke the stroke() or the fill() method as per need. The thing to note is that if you are using the fill() method, then it automatically closes the path if possible and then fills the shape, so there is no need to invoke the closePath() method in that case.

Let us look at the code to draw a simple triangle. There is no primitive method in the Canvas API to draw a triangle, so we will have to do it ourselves as shown below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Line</title>
<script>
function draw_triangle() {

 var canvasObj = document.getElementById("mycanvas");
 var canvasCtx = canvasObj.getContext("2d");

 //Draw a Line
 canvasCtx.beginPath();
 canvasCtx.moveTo(100,50);
 canvasCtx.lineTo(150,150);
 canvasCtx.lineTo(50,150);
 canvasCtx.closePath();
 canvasCtx.stroke();
}

function clear_canvas() {
	var canvasObj = document.getElementById("mycanvas");
	//May not work in some browsers: Change the value and set it back to original
	//canvasObj.width = 10;
	//canvasObj.width = 200;
	var canvasCtx = canvasObj.getContext("2d");
	canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
    <div id="instructions">
     <a href="#" onclick="draw_triangle();return false">Click to draw a triangle</a>
     <a href="#" onclick="clear_canvas();return false">Click to clear</a>

    </div>
 <div id="drawingsurface">
  <canvas id="mycanvas" width="200" height="200"/>
 </div>
</body>
</html>

Let us go through the code in brief. We declare a canvas with a height and width of 200 pixels. The main method is draw_triangle(). First, we get a handle to the 2D context, then we begin the path of drawing the triangle shape. This is done via the beginPath() call. Then we move to the first point in the triangle i.e. (x=100, y=50) via the moveTo() method. Once we have reached the starting point, we simple draw two more lines that represent the two sides of the triangle, other than the horizontal base of the triangle. Then we simply close the path via the closePath() method, which will behind the scenes complete the shape and finally the stroke() method is invoked.

See it in action here.

Let us look at another piece of code that draws the same triangle but it is filled with the default stroke color.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Line</title>
<script>
function draw_triangle() {

 var canvasObj = document.getElementById("mycanvas");
 var canvasCtx = canvasObj.getContext("2d");
 canvasCtx.beginPath();
 canvasCtx.moveTo(100,50);
 canvasCtx.lineTo(150,150);
 canvasCtx.lineTo(50,150);
 canvasCtx.fill();
}

function clear_canvas() {
	var canvasObj = document.getElementById("mycanvas");
	//May not work in some browsers: Change the value and set it back to original
	//canvasObj.width = 10;
	//canvasObj.width = 200;
	var canvasCtx = canvasObj.getContext("2d");
	canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
    <div id="instructions">
     <a href="#" onclick="draw_triangle();return false">Click to draw a triangle</a>
     <a href="#" onclick="clear_canvas();return false">Click to clear</a>

    </div>
 <div id="drawingsurface">
  <canvas id="mycanvas" width="200" height="200"/>
 </div>
</body>
</html>

In the above code, the only difference is that we have removed the call to closePath() because the fill() method automatically closes the shape first and then fills it with the default color accordingly.

See it in action here.

To see another example of 3 triangles, all filled with different colors, click here.


HTML5 Canvas Recipes

  1. Getting Started with Canvas
  2. Rectangles
  3. Strokes and Fills
  4. Drawing Text
  5. Paths
  6. Circles and Arcs
  7. Images
  8. Graphs With Canvas

Back to HTML5 Series

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s