Tag: HTML5

Bezier Curve In Canvas: HTML5

Today lets learn to draw Bezier curves on Canvas, using HTML5.

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

bezier-curve-canvas-html5

Syntax
bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY);

(cx1, cy1) are control point one.
(cx2, cy2) are control point two.
(endX, endY) are end point of the curve.

You may be wondering about the start point!
We specify it with the help of moveTo() method.

Javascript file: Bezier Curve
myScript.js

1
2
3
4
5
6
7
8

context.lineWidth= 6;
context.beginPath();
context.moveTo(10, 150);
context.bezierCurveTo(30, 40, 90, 50, 180, 190);
context.strokeStyle= "red";
context.fillStyle= "yellow";
context.stroke();
context.fill();

With a lineWidth of 6px, we draw a curve with 30px x-axis, 40px y-axis as first control point and 90px x-axis, 50px y-axis as second control point; Also 180px x-axis, 190px y-axis as end points of the curve. Not to forget the starting point, moveTo, which has 10px x-axis and 150px y-axis.

Javascript file: Control Point Path
myScript.js

1
2
3
4
5
6
7
8

context.lineWidth= 1;
context.beginPath();
context.moveTo(10, 150);
context.lineTo(30, 40);
context.lineTo(90, 50);
context.lineTo(180, 190);
context.strokeStyle= "pink";
context.stroke();

With the help of the points in Bezier curve example above, we trace its control points.
moveTo takes the same value.
first lineTo takes first control points value.
second lineTo takes second control point value.
third lineTo takes end point values.

Bezier Curve In Canvas: HTML5


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

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



Also learn how to draw lines/path corresponding to the curves, by following the video. This would be an essential skill in real-time web development.

Javascript file: Full 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
25
26
27
28
29
30
31

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.lineWidth= 6;
context.beginPath();
context.moveTo(10, 150);
context.bezierCurveTo(30, 40, 90, 50, 180, 190);
context.strokeStyle= "red";
context.fillStyle= "yellow";
context.stroke();
context.fill();
 
 
context.lineWidth= 1;
context.beginPath();
context.moveTo(10, 150);
context.lineTo(30, 40);
context.lineTo(90, 50);
context.lineTo(180, 190);
context.strokeStyle= "pink";
context.stroke();
 
}
}

Color Scheme
Curve border – strokeStyle : red
Curve Fill – fillStyle : yellow
Control Point Path : pink

Note: You can skip the closePath() method, since there is no use of closing the path in our example above.

Draw Arcs/Circle with Canvas: HTML5

Today lets learn how to use arcs and paths to draw circle.

Arcs are curves that are portions of a circle. A full circle is a 360 degree arc!
A Path is a collection of some lines(or shapes) that once defined can be either filled or stroked.

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

Syntax
arc(x, y, r, sA, eA, TF);

arc method takes 6 parameters. x and y are the x-axis and y-axis, which is the center of the circle.
i.e., The x and y parameters determine where the center of the circle will be located on your canvas.

r is the radius of the circle, in pixels.
i.e., the distance of the curve from the center of the circle.

sA is start angle of the circle.
eA is the end angle of the circle.

TF is the direction – which can take 2 values i.e., True or False.

True: negative degrees, counter-clockwise direction.
False: positive degrees, clockwise direction.

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.lineWidth= 6;
context.beginPath();
 
var degree = 270;
var radian = ( Math.PI / 180 ) * degree;
 
context.arc(100, 100, 50, 0, radian, false);
context.strokeStyle= "red";
context.fillStyle= "blue";
context.stroke();
context.fill();
context.closePath();
 
}
}

Degree to Radian

radians-and-degrees

We convert degrees to radians using a simple mathematical formula:
Radians = (PI / 180 ) * degree;

Draw Arcs/Circle with Canvas: HTML5


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

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



Note:
1. By default, direction of drawing the arc is clockwise/positive degrees(i.e., the value of last parameter is false).
2. PI value is 180.
3. 2 * PI is 360!
4. arc method should be passed with radian values and not degrees.

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.