Tag: shapes

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!

Draw Rectangle: HTML5 Canvas

This video tutorial illustrates the drawing of rectangle with styling.

Tutorial Includes:
Drawing rectangle.
Specifying x-axis and y-axis for drawing rectangle.
Specifying width and height for drawing rectangle.
Filling the border(strokeStyle) with color.
Filling the body(fillStyle) of rectangle with color.
Specifying the border width(lineWidth). etc

HTML5-canvas-rectangle-xaxis-yaxis


HTML file
index.html

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

< !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>

Here we’ve attached a stylesheet and a script file.
It also has a canvas element with an id of myCanvas, with 200px width and height.

CSS file
myStyle.css

1
2
3

canvas {
border: 2px dotted black;
}

We are assigning a 2px wide black dotted border to the canvas element.

JavaScript file
myScript.js

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

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context = myCanvas.getContext("2d");
context.lineWidth   = 2;
context.strokeStyle = "red";
context.strokeRect(10, 10, 100, 100);
 
context.fillStyle = "blue";
context.fillRect(10, 10, 100, 100);
}
}

Related Read: Canvas Basics: HTML5

Once the index.html file loads, it calls a method called canvas.

Validation
Inside canvas method, we check if the canvas element is actually present on the webpage. If present, we check if the browser actually supports context object.

If both of them are present, then we make use of the API provided by context object and draw the rectangle and assign some styling to it.

Defaults
By default, lineWidth has 1px. In our example we’re setting it to 2px.
By default, strokeStyle and fillStyle has black color. In our example, we’re setting it to red and blue respectively.

Result
Canvas element has some margin by default. And the top left corner of canvas is considered x-axis = 0 and y-axis = 0.
In our example, we are placing our rectangle at 10px x-axis and 10px y-axis, with 100px width and height.

With all these, we get a 100px wide and 100px tall, blue rectangle with a red border.

Draw Rectangle: HTML5 Canvas


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

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



Now you maybe thinking, we’ll have fillCircle and strokeCircle, fillTriangle and strokeTriangle methods to draw circles and triangles. But NO. We don’t have such methods.
We need to achieve shapes other than rectangle using paths and lines. Lets see how it can be done in our coming video tutorials. Stay subscribed.