Tag: canvas

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.

Canvas Basics: HTML5

We shall start exploring more about Canvas element of HTML5.
It’s designed to draw graphics on the fly, using Javascript.

Canvas is like a placeholder for graphics. We place a context upon canvas, upon which we draw our graphics – lines, circles, triangle, pictures etc.

HTML file
index.html

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

< !DOCTYPE HTML>
<html>
 <head>
  <title>Canvas: HTML5</title>
  <meta charset="utf-8"/>
  <link href="myStyle.css" rel="stylesheet"/>
 </head>
 <body>
 
  <canvas id="holder" width="300" height="200">
    Please upgrade your browser!
  </canvas>
 
</body>
</html>

Here we have attached a style sheet to index.html
and we have the canvas element with an id, width and a height property applied to it.

We can specify some text in-between the opening and closing canvas tag, which shows up in the browser which doesn’t support HTML5’s canvas element.

CSS file
myStyle.css

1
2
3

canvas {
border: 3px groove black;
}

Here we’re applying some basic style to our canvas.

Since canvas is transparent by nature, we can’t see it unless we give it a border or fill some color into it. So, using CSS we apply 3px wide black border, for the purpose of illustration.

Canvas Basics: HTML5


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

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



CSS width and height
We could even assign width and height property of canvas element via CSS, but it is not the proper way to do it.

We must give width and height property inside HTML document itself – as canvas property.

If you assign width and height via CSS, it’ll either stretch or shrink depending on the actual canvas width and height: which looks weird.