Tag: round

Line Joining In Canvas: HTML5

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


[youtube https://www.youtube.com/watch?v=QSdWeuVuyX4]

YouTube Link: https://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.

Line Ending In Canvas: HTML5

Today lets learn about line ending properties present in HTML5.

The property we’re using is lineCap. It has 3 values: butt, round, square.

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

Javascript file: First Line
myScript.js

1
2
3
4
5
6
7
8

context.lineWidth=15;
 
context.beginPath();
context.lineCap="butt";
context.moveTo(10, 50);
context.lineTo(190, 50);
context.strokeStyle="red";
context.stroke();

Here we set the lineWidth to 15px. Begin the path and give it a lineCap(line ending) value of butt, and make it red colored.

Javascript file: Second and third Line
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13

context.beginPath();
context.lineCap="round";
context.moveTo(10, 75);
context.lineTo(190, 75);
context.strokeStyle="blue";
context.stroke();
 
context.beginPath();
context.lineCap="square";
context.moveTo(10, 100);
context.lineTo(190, 100);
context.strokeStyle="green";
context.stroke();

Similarly, we draw 2 more lines: with round and square lineCap and blue and green colors respectively.

Javascript file: line endings
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12

context.lineWidth=1;
context.beginPath();
context.moveTo(10, 0);
context.lineTo(10, 200);
context.strokeStyle="pink";
context.stroke();
 
context.beginPath();
context.moveTo(190, 0);
context.lineTo(190, 200);
context.strokeStyle="pink";
context.stroke();

Here we change the lineWidth to 1px. Then mark a border and separate the line ending shapes with the actual line itself.

Full Javascript Code file
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context= myCanvas.getContext("2d");
 
 
context.lineWidth = 15;
 
context.beginPath();
context.lineCap="butt";
context.moveTo(10, 50);
context.lineTo(190, 50);
context.strokeStyle= "red";
context.stroke();
 
context.beginPath();
context.lineCap="round";
context.moveTo(10, 75);
context.lineTo(190, 75);
context.strokeStyle = "blue";
context.stroke();
 
context.beginPath();
context.lineCap="square";
context.moveTo(10, 100);
context.lineTo(190, 100);
context.strokeStyle = "green";
context.stroke();
 
context.lineWidth= 1;
context.beginPath();
context.moveTo(10, 0);
context.lineTo(10, 200);
context.strokeStyle= "pink";
context.stroke();
 
context.beginPath();
context.moveTo(190, 0);
context.lineTo(190, 200);
context.strokeStyle= "pink";
context.stroke();
 
 
}
}

Line Ending In Canvas: HTML5


[youtube https://www.youtube.com/watch?v=FcoonQCq2Jw]

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



By default line ending(lineCap) has a value butt.

In our next video lessons, lets learn about the curves.