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.
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
[youtube https://www.youtube.com/watch?v=QSdWeuVuyX4]
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.
