HTML5 Canvas

HTML5 Canvas: Styles

large-post-image-styles

Here I’m going to experiment with adding different styles onto shapes and lines within a Canvas – looking at colour fills, opacity of fills, outlines/borders and linejoins and linecaps for lines and outlines.

Shape styles

Colour filled shape

In previous posts, I have added a default fill to a shape, but this time I’ll be adding a coloured fill.

HTML5 Canvas colour filled shape

View demo

The markup

The shape is drawn first (in this case, a star), the context of fillStyle is applied along with the desired colour in a hex or rgb value, then lastly the context of fill is added to actually fill the shape with colour.

View markup
Javascript portion
function draw() {	
	// Filled star
	var canvas = document.getElementById("starFilled");
   	if (canvas.getContext) {
		var 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.fillStyle = "#0cf";
		ctx.fill();
	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="starFilled" width="216" height="206"></canvas>
</body>

Colour filled shape with lowered opacity

Opacity of shapes can also be set by using an rgba value instead of a hex value.

HTML5 Canvas colour filled shape with lowered opacity

View demo

The markup

By adding the colour in as an rgba value, I can play with the opacity of the shape too. The first 3 numbers are the rgb values and the last number represents the opacity; in this case we’ve set it to 0.5, which will reduce the opacity by half.

View markup
Javascript portion
function draw() {
	// Filled star
    	var canvas = document.getElementById("starFilledOpacity");
    	if (canvas.getContext) {
        	var 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.fillStyle = "rgba(0, 204, 255, 0.5)";
        	ctx.fill();
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="starFilledOpacity" width="216" height="206"></canvas>
</body>

Colour filled and outlined shape

This example shows custom colours applied to both the fill and the outline of a shape.

HTML5 Canvas colour filled and outlined shape

View demo

The markup

As I don’t want to change the opacity of the shape in this example, I’ve used hex values instead of rgba for simplicity. The fill styles and stroke styles are specified before each one is called; if they were placed afterwards, they would be ignored.

View markup
Javascript portion
function draw() {
	// Colour filled and outlined star
    	var canvas = document.getElementById("starFilledOutlined");
    	if (canvas.getContext) {
        	var 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.fillStyle = "#0cf";
        	ctx.fill();
        	ctx.lineWidth = 8;
        	ctx.strokeStyle = "#069";
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="starFilledOutlined" width="216" height="206"></canvas>
</body>

Line joins

Line joins apply to lines or outlines applied to a shape path. Where two lines meet, one of the following line joins can be applied:

Round line join

When a round line join is applied, it means that the point between the two lines is smoothly rounded off.

HTML5 Canvas star shape with round line join

View demo

The markup

A shape is drawn, then the context of lineJoin with the value of round is applied to the shape before the stroke context is added to outline the shape.

View markup
Javascript portion
function draw() {
	// Outlined star with round line join
    	var canvas = document.getElementById("starLineJoinRound");
    	if (canvas.getContext) {
        	var 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.lineWidth = 8;
        	ctx.lineJoin = "round";
        	ctx.stroke();
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="starLineJoinRound" width="216" height="206"></canvas>
</body>

Bevel line join

A bevel line join applied to a shape means that where the lines meet, the ends are cut off flat.

HTML5 Canvas star shape with bevel line join

View demo

The markup

A shape is drawn, then the context of lineJoin with the value of bevel is applied to the shape before the stroke context is added to outline the shape.

View markup
Javascript portion
function draw() {
	// Outlined star with bevel line join
	var canvas = document.getElementById("starLineJoinBevel");
	if (canvas.getContext) {
        	var 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.lineWidth = 8;
        	ctx.lineJoin = "bevel";
        	ctx.stroke();
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="starLineJoinBevel" width="216" height="206"></canvas>
</body>

Miter line join

If a line join is not specified, the miter value is the default. When this line join is applied, it means that the two lines which are being joined extend outwards to a point.

HTML5 Canvas star shape with miter line join

View demo

The markup

A shape is drawn, then the context of lineJoin with the value of miter is applied to the shape before the stroke context is added to outline the shape.

View markup
Javascript portion
function draw() {	
	// Outlined star with miter line join
    	var canvas = document.getElementById("starLineJoinMiter");
    	if (canvas.getContext) {
        	var 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.lineWidth = 8;
        	ctx.lineJoin = "miter";
        	ctx.stroke();
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="starLineJoinMiter" width="216" height="206"></canvas>
</body>

Miter limit

A miter limit will limit the height of the miter line join, if this is applied. To illustrate this, to this star shape I have applied a line join of miter and then set the miter limit to 2, this will cut down the height of the miter (pointed end) significantly and flatten it out to give it more the appearance that the bevel line join has been applied instead.

HTML5 Canvas star shape with bevel line join and miter limit applied

View demo

The markup

The context of miterLimit is applied (in this case, with a value of 2) before the stroke context is added.

View markup
Javascript portion
function draw() {
	// Outlined star with miter limit
	var canvas = document.getElementById("starOutlineMiterlimit");
	if (canvas.getContext) {
        	var 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.lineWidth = 8;
        	ctx.lineJoin = "miter";
        	ctx.miterLimit = "2";
        	ctx.stroke();
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="starOutlineMiterlimit" width="216" height="206"></canvas>
</body>

Line caps

Line caps determine how a the ends of a line drawn on a Canvas appear.

Round line cap

When the round line cap is added to a line, it will smoothly round off both ends.

HTML5 Canvas straight line with round line caps

View demo

The markup

First the line is drawn, then the context of lineCap along with the value of round is applied before the stroke context is applied.

View markup
Javascript portion
function draw() {
	// Straight line with round line cap
    	var canvas = document.getElementById("straightLinecapRound");
    	if (canvas.getContext) {
        	var ctx = canvas.getContext("2d");

        	ctx.beginPath();
        	ctx.moveTo(5, 10);
        	ctx.lineTo(195, 10);

        	ctx.lineWidth = 10;
        	ctx.lineCap = "round";
        	ctx.stroke();
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="straightLinecapRound" width="200" height="25"></canvas>
</body>

Butt line cap

When the butt line cap is added to a line, it will make the line abruptly square off at the end.

HTML5 Canvas straight line with butt line caps

View demo

The markup

First the line is drawn, then the context of lineCap along with the value of butt is applied before the stroke context is applied.

View markup
Javascript portion
function draw() {
	// Straight line with butt line cap
    	var canvas = document.getElementById("straightLinecapButt");
    	if (canvas.getContext) {
        	var ctx = canvas.getContext("2d");

        	ctx.beginPath();
        	ctx.moveTo(5, 10);
        	ctx.lineTo(195, 10);

        	ctx.lineWidth = 10;
        	ctx.lineCap = "butt";
        	ctx.stroke();
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="straightLinecapButt" width="200" height="25"></canvas>
</body>

Square line cap

When the square line cap is added to a line, it will extend the line equal to the width before squaring it off at the end.

HTML5 Canvas straight line with square line caps

View demo

The markup

First the line is drawn, then the context of lineCap along with the value of square is applied before the stroke context is applied.

View markup
Javascript portion
function draw() {
	// Straight line with square line cap
    	var canvas = document.getElementById("straightLinecapSquare");
    	if (canvas.getContext) {
        	var ctx = canvas.getContext("2d");

        	ctx.beginPath();
        	ctx.moveTo(5, 10);
        	ctx.lineTo(195, 10);

        	ctx.lineWidth = 10;
        	ctx.lineCap = "square";
        	ctx.stroke();
    	}
}
HTML portion
<body onLoad="draw();">
	<canvas id="straightLinecapSquare" width="200" height="25"></canvas>
</body>