HTML5 Canvas

HTML5 Canvas: Paths

HTML5 Canvas: Paths

To create more complex shapes than circles and rectangles, we need to learn how to create paths, so we can have free reign and draw whatever we like. This post will concentrate on drawing paths and shapes with straight lines, and I shall cover curved paths in a future post.

Straight line path

A straight line has only two points to its path: the starting point and the ending point:

HTML5 Canvas straight line path

View demo

The markup

To draw a straight line, I will be using the moveTo and lineTo contexts.

View markup

Javascript portion

function draw() {	
    	// Straight line
    	var canvas = document.getElementById("straightLine");
    	if (canvas.getContext) {
        	var ctx = canvas.getContext("2d");

        	ctx.beginPath();
        	ctx.moveTo(0, 10);
        	ctx.lineTo(200, 10);

        	ctx.lineWidth = 5;
        	ctx.stroke();
    	}
}

HTML portion

<body onLoad="draw();">
    	<canvas id="straightLine" width="200" height="25"></canvas>
</body>

The first thing I need to do is move the starting point of the path to where I want it – this is achieved with the moveTo context, which picks up the point and shifts it without creating a path. In my example above, I have moved the start point down 10 pixels from the top of the Canvas but left it butted up to the left. Then I applied the lineTo context to move the path 200 pixels along to the right to create the simple straight horizontal line. A stroke has been applied to make it visible.

Straight line path with multiple points

This next path is more varied, with more points placed in different positions to create a jagged line path:

HTML5 Canvas straight line path with multiple points

View demo

The markup

View markup

Javascript portion

function draw() {	
    	// Straight line path with multiple points
    	var canvas = document.getElementById("StraightLineMultiple");
    	if (canvas.getContext) {
        	var ctx = canvas.getContext("2d");

        	ctx.beginPath();
        	ctx.moveTo(5, 75);
        	ctx.lineTo(50, 50);
        	ctx.lineTo(100, 95);
        	ctx.lineTo(200, 20);

        	ctx.lineWidth = 5;
        	ctx.stroke();  
    	}
}

HTML portion

<body onLoad="draw();">
    	<canvas id="straightLineMultiple" width="200" height="100"></canvas>
</body>

This markup contains more lineTo context calls to create more points, and as you can see the numbers change accordingly to place each point in its place.

Straight line path drawing with multiple points using moveTo

Now that we know how to use moveTo and lineTo contexts, more intricate line drawings can be completed. I tried drawing a house (in the style of a child :P ):

HTML5 Canvas straight line house drawing with multiple points using moveTo

View demo

The markup

View markup

Javascript portion

function draw() {		
    	// Clearing rectangle
    	var canvas = document.getElementById("straightLineHouse");
    	if (canvas.getContext) {
        	ctx = canvas.getContext("2d");

        	ctx.beginPath();
        	ctx.moveTo(30, 190);
        	ctx.lineTo(170, 190);
        	ctx.lineTo(170, 50);
        	ctx.lineTo(30, 50);
        	ctx.lineTo(30, 190);
        	ctx.moveTo(30, 50);
        	ctx.lineTo(20, 50);
        	ctx.lineTo(100, 10);
        	ctx.lineTo(180, 50);
        	ctx.lineTo(170, 50);
        	ctx.moveTo(115, 190);
        	ctx.lineTo(115, 140);
        	ctx.lineTo(85, 140);
        	ctx.lineTo(85, 190);
        	ctx.moveTo(45, 70);
        	ctx.lineTo(75, 70);
        	ctx.lineTo(75, 100);
        	ctx.lineTo(45, 100);
        	ctx.lineTo(45, 70);
        	ctx.moveTo(125, 70);
        	ctx.lineTo(155, 70);
        	ctx.lineTo(155, 100);
        	ctx.lineTo(125, 100);
        	ctx.lineTo(125, 70);

        	ctx.lineWidth = 3;
        	ctx.stroke();
    	}
}

HTML portion

<body onLoad="draw();">
    	<canvas id="straightLineHouse" width="200" height="200"></canvas>
</body>

Immediately, the javascript code becomes much longer. moveTo is used whenever you want to ‘pick the pen up’ and place it somewhere else to start drawing another shape without drawing a line between them. In my example, I drew the shape of the house, the windows, the door and the roof shape all separately, and used moveTo to move from one to the other. Ideally, you’d use drawRect for the rectangle elements, but this is just to show how to complete the whole thing using purely paths.

Filled straight line path shape

This is actually simpler than the previous example, the star shape just uses multiple lineTo contexts to create the star shape, then the shape is closed and filled instead of outlined, as in the previous examples.

HTML5 Canvas filled star shape using straight line paths

View demo

The markup

View markup

Javascript portion

function draw() {
    	// Filled star
    	var canvas = document.getElementById("starFilled");
    	if (canvas.getContext) {
        	ctx = canvas.getContext("2d");
        
        	ctx.beginPath();
        	ctx.moveTo(107.8, 0.0);
        	ctx.lineTo(141.2, 67.5);
        	ctx.lineTo(215.7, 78.3);
        	ctx.lineTo(161.8, 130.9);
        	ctx.lineTo(174.5, 205.1);
        	ctx.lineTo(107.8, 170.1);
        	ctx.lineTo(41.2, 205.1);
        	ctx.lineTo(53.9, 130.9);
        	ctx.lineTo(0.0, 78.3);
        	ctx.lineTo(74.5, 67.5);
        	ctx.lineTo(107.8, 0.0);
        	ctx.closePath();

        	ctx.fill();
    	}
}

HTML portion

<body onLoad="draw();">
    	<canvas id="starFilled" width="216" height="206"></canvas>
</body>