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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
View demo
The markup
The context of miterLimit is applied (in this case, with a value of 2) before the stroke context is added.
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.
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.
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.
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.
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.
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.
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>