Category: xHtml

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.

Canvas Lines and Paths: HTML5

Today we shall learn how to draw shapes other than rectangle, with the help of LINES and PATHS.

A PATH is a collection of lines(or shapes) that once defined can be either filled or stroked.

A LINE can be created with different settings. We can specify where they start, how they join each other, and how they end.

We have different set of methods and properties to handle drawing lines:
beginPath() as the name suggests, begins a new set of path drawing operation.
moveTo(x, y) doesn’t draw anything. But it places the pointer to the x and y position we specify as argument.
lineTo(x, y) actually draws the line from the moveTo(x, y) point to the new lineTo(x, y) point.
lineWidth Sets the width of the drawing lines.

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

JavaScript 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

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.beginPath();
context.moveTo(30, 30);
context.lineTo(100, 40);
context.lineTo(100, 190);
context.closePath();
 
context.strokeStyle  = "red";
context.lineWidth = 5;
context.stroke();
 
context.fillStyle    = "blue";
context.fill();
 
}
}

We begin the path and place the initial drawing point to 30px x-axis and 30px y-axis using moveTo() method. Next we sketch a line to 100px x-axis and 40px y-axis from moveTo() point, using lineTo() method. Next we draw another line, which is attached to one end of our first line: with 100px x-axis and 190px y-axis. Next we close the path using closePath() method.

This forms a triangle. But yet it is not displayed on our browser, until we call stroke() method, which strokes the lines.

Using strokeStyle and lineWidth properties we set its color and width.

We also assign fill color to blue and call fill() method to fill the color of the PATH(triangle).

Canvas Lines and Paths: HTML5


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

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



In our next video tutorial we shall see other properties:

lineCap which determines the ending of lines using 3 properties: butt(default), rounded ends, square ends.
lineJoin which determines hoe the lines join each other: round joint, bevel joint and miter joint(default)
miterLimit is related to miter joint. This is the limit at which the line joins are cut off and are drawn to look like bevel join. It has a default value of 10.

Canvas clearRect: HTML5

Rectangle is the only primitive type supported by canvas.

It has 3 functions:
strokeRect(x, y, w, h);
fillRect(x, y, w, h);
clearRect(x, y, w, h);

In our previous video tutorials we’ve seen using strokeRect and fillRect methods. In this short video tutorial, we’re illustrating clearRect() method.

clearRect method erases the given rectangle and makes the area fully transparent.

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

JavaScript file
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.fillStyle = "red";
context.fillRect(10, 10, 75, 75);
 
context.fillStyle = "blue";
context.fillRect(90, 10, 75, 75);
 
context.clearRect(5, 40, 200, 40)
}
}

Here we first draw 2 rectangles: red and blue.
Next clear part of these two rectangles using clearRect method.

We start clearRect() from 5px x-axis, and 40px y-axis; with a width of 200px, so that it covers both red and blue rectangles.

Canvas clearRect: HTML5


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

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



Advantages of clearRect() method may not seem obvious at first, but will be helpful in game development – to draw transparent paths between your drawings/graphics.

Canvas State: HTML5

Today lets learn about canvas states, which will come handy once we start drawing complex shapes/graphics. Canvas state keeps track of current values of lineWidth, strokeStyle, fillStyle, lineCap, transformation matrix, clipping regions etc.

Backup-Recovery

Each time we save a state, it’s pushed onto a stack of saved states from which we can restore the state later.

HTML file
index.html

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

< !DOCTYPE HTML>
<html>
<head>
<title>Canvas: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 
<canvas id="myCanvas" width="200" height="200">
  Upgrade Browser
 </canvas>
 
</body>
</html>

HTML5 document with a canvas element which has an id and 200px width and height.
It’s also attached with an external stylesheet and a javascript file.

StyleSheet file
myStyle.css

1
2
3

canvas {
border: 2px dotted black;
}

Here we’re selecting canvas element and assigning it a 2px thick black dotted border.

JavaScript file
myScript.js

1
2
3
4
5
6
7
8
9
10

context.fillStyle   = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.fillStyle   = "blue";
context.fillRect(20, 20, 75, 75);
 
 
context.restore();
context.fillRect(30, 30, 100, 100);

We have 3 rectangle boxes.
First one is filled with red color.
Second one is filled with blue color.

Using save() method, we have saved the fillStyle property value.
Now we restore fillStyle property before drawing the third rectangle.
Saved canvas state has fillStyle as red, so our third rectangle gets red color.

JavaScript file
myScript.js

1
2
3
4
5
6
7
8
9
10
11

context.fillStyle   = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.fillStyle   = "blue";
context.fillRect(20, 20, 75, 75);
context.save();
 
context.restore();
context.restore();
context.fillRect(30, 30, 100, 100);

Here we’re saving canvas states twice.

Canvas State Stack
blue left_arrow 2nd in.

red left_arrow 1st in.

Canvas State Calls
1st restore call right_red_arrow blue

2nd restore call right_red_arrow red

Hence, now third rectangle will be red colored.

Canvas State: HTML5


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

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



Full JavaScript Code
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.fillStyle   = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.fillStyle   = "blue";
context.fillRect(20, 20, 75, 75);
context.save();
 
context.restore();
context.restore();
context.fillRect(30, 30, 100, 100);
 
}
}

Related read:
Canvas Basics: HTML5
Draw Rectangle: HTML5 Canvas

Instantly we could think of building “undo” feature for our drawing board application with the help of canvas state stack!