Line Joining In Canvas: HTML5

Advertisement:

Lets quickly learn about Line Joins in Canvas.

The property we’re using is lineJoin. It has 3 values: round, bevel, miter.
We also look at miter limit.

canvas-lineJoin-miter-miterlimit

index.html and myStyle.css files are kept same as illustrated in previous video tutorial: Canvas State: HTML5

Javascript file: Rounded Join
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = canvas;
 
function canvas()
{
	var myCanvas = document.getElementById("myCanvas");
 
	if( myCanvas && myCanvas.getContext("2d") ) 
	{
		var context = myCanvas.getContext("2d");
 
		context.lineWidth= 6;
		context.lineJoin= "round";
		context.beginPath();
		context.moveTo(40, 10);
		context.lineTo(25, 190);
		context.lineTo(180, 190);
		context.closePath();
		context.strokeStyle= "red";
		context.stroke();
		context.fillStyle= "blue";
		context.fill();
	}
}

Javascript file: Bevel Join
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = canvas;
 
function canvas()
{
	var myCanvas = document.getElementById("myCanvas");
 
	if( myCanvas && myCanvas.getContext("2d") ) 
	{
		var context = myCanvas.getContext("2d");
 
		context.lineWidth= 6;
		context.lineJoin= "bevel";
		context.beginPath();
		context.moveTo(40, 10);
		context.lineTo(25, 190);
		context.lineTo(180, 190);
		context.closePath();
		context.strokeStyle= "red";
		context.stroke();
		context.fillStyle= "blue";
		context.fill();
	}
}

Javascript file: Miter Join
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.onload = canvas;
 
function canvas()
{
	var myCanvas = document.getElementById("myCanvas");
 
	if( myCanvas && myCanvas.getContext("2d") ) 
	{
		var context = myCanvas.getContext("2d");
 
		context.lineWidth= 6;
		context.lineJoin= "miter";
		context.miterLimit= 1;
		context.beginPath();
		context.moveTo(40, 10);
		context.lineTo(25, 190);
		context.lineTo(180, 190);
		context.closePath();
		context.strokeStyle= "red";
		context.stroke();
		context.fillStyle= "blue";
		context.fill();
	}
}

Here we draw a triangle which is of 6px line width, with red and blue border and fill respectively. Each time we change the value of lineJoin and illustrate different lineJoins in HTML5 Canvas.

Line Joining In Canvas: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=QSdWeuVuyX4 [Watch the Video In Full Screen.]



Miter join is the default join. And we can control the sharpness of the edge or convert it to bevel join (control the edge/join folding ) using miterLimit property.

1 thought on “Line Joining In Canvas: HTML5”

Leave a Reply

Your email address will not be published. Required fields are marked *