Rotate Transformation in Canvas: HTML5

Today lets learn about rotate transformation. And also lets see how we can use translate transformation and rotate transformation to create simple animation.

Demo

Syntax
rotate(angleInRadians);
The rotate() transformation causes the subsequent drawing operations to be rotated by a given angle. Note that the angles are in radian and not in degrees. Also the rotation takes place around the current origin and not with respect to the center of the object or the element drawn.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Rotate Transformation On a rectangle
myScript.js

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.fillStyle   = "blue";
                context.fillRect(150, 50, 100, 50);
                context.rotate(0.5);
                context.fillRect(150, 50, 100, 50);
 
}
}

Here we take 2 rectangles with same x and y axis and same width and height. For second rectangle we apply a rotation of 0.5 radians. With this you can see that the rotation takes place with respect to the origin of the canvas, which is (0, 0).

JavaScript file: Rotate Transformation On a Circle
myScript.js

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
var rdl             = context.createRadialGradient(175, 175, 25, 175, 175, 100);
rdl.addColorStop(0.0, "#f00"); //RED
rdl.addColorStop(0.5, "#00f"); //BLUE
rdl.addColorStop(1.0, "#0f0"); //Green
 
 
setInterval(function(){
context.beginPath();
context.fillStyle  = rdl;
context.arc(175, 175, 100, 0, 2 * Math.PI);
context.fill();
context.translate(175, 175);
context.rotate(2);
}, 50);
 
}
}

Here we draw a radialgradient and rotate it with 2 radians with a time interval of 50 milliseconds. Before we rotate the circle we change the origin of the canvas to 175px x-axis and 175px y-axis, so that the rotation takes place with respect to the point (175, 175).

Rotate Transformation and Animation in Canvas: HTML5

[youtube https://www.youtube.com/watch?v=U3v5J-fOeV0]

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

Note:
We convert degree to radian using a simple mathematical formula:
Radian = (PI / 180 ) * degree;

While developing moving objects in our applications(like online games applications), we need not remember lot of locations/points on the canvas to move our element, instead, we can change the origin of the canvas using translate transformation and move the elements or rotate them!

Scale Transformation in Canvas: HTML5

Today lets learn about scale transformation.

Syntax
scale(x, y);
Scales drawing operations by multiples of x and y.

Related read: Translate Transformation in Canvas: HTML5 (important)

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Scale Transformation of 2 rectangles
myScript.js

context.fillStyle  = "red";
context.fillRect(10, 10, 50, 50);
 
context.scale(2, 2);
context.fillStyle  = "blue";
context.fillRect(40, 40, 50, 50);

Here we have 2 rectangles with red and blue color, at two different x, y axis, but with same height and width i.e., 50px each
But using scale() method, we scale the second rectangle by 2. So the second rectangle is drawn at 80px x-axis, 80px y-axis with a width and height of 100px.

JavaScript file: Scale Transformation of 3 rectangels
myScript.js

context.fillStyle  = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.scale(2, 2);
context.fillStyle  = "blue";
context.fillRect(40, 40, 50, 50);
 
context.restore();
context.scale(0.5, 0.5);
context.fillStyle  = "green";
context.fillRect(100, 40, 50, 50);

Here we save the scale value of first rectangle(which is 1,1), and restore it for the third rectangle – using canvas status. If we don’t use canvas status, then the (0.5, 0.5) scale for the third rectangle will be applied with respect to the second rectangle which has a scale of (2, 2). Hence, third rectangle scale will be (1.5, 1.5). As 2.0 – 0.5 = 1.5

JavaScript file: Full Free Code
myScript.js

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.scale(2, 2);
context.fillStyle  = "blue";
context.fillRect(40, 40, 50, 50);
 
context.restore();
context.scale(0.5, 0.5);
context.fillStyle  = "green";
context.fillRect(100, 40, 50, 50);
    }
}

With save and restore methods applied:
1st rectangle: (1.0, 1.0);
2nd rectangle: (2.0, 2.0);
3rd rectangle: (0.5, 0.5);

Without save and restore methods applied:
1st rectangle: (1.0, 1.0);
2nd rectangle: (2.0, 2.0);
3rd rectangle: (1.5, 1.5);

Scale Transformation in Canvas: HTML5

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

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

The scale() transformation causes drawing operations to be multiplied by a given scale factor in the x and y direction.

scale() transformation can be applied to any drawing operation on the canvas, like circles, triangle, images etc.

Translate Transformation in Canvas: HTML5

Transformation are the way objects are drawn on to the canvas. There are 3 transformations.
1. Translate
2. Scale
3. Rotate

..along with a way to define our own free-form transformations.

In this video tutorial, we shall see how to use Translate Transformation.

Translate Transformation moves the canvas origin to a new location.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Translate Transformation
myScript.js

context.fillStyle = "red";
context.fillRect(0, 0, 75, 75);
 
context.translate(80, 80);
context.fillRect(0, 0, 75, 75);

Here we draw a red color filled Rectangle at 0px x-axis and 0px y-axis, with a width and height of 75px each. Next we call translate method, and change the point of origin of the canvas to 80px x-axis and 80px y-axis. Then we copy paste the same rectangle code with same settings, but this time, the rectangle appears at the new canvas origin i.e., at 80px x-axis and 80px y-axis.

JavaScript file: Full Code
myScript.js

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.shadowColor = "black";
context.shadowBlur  = 20;
 
context.fillStyle   = "red";
context.fillRect(0, 0, 75, 75);
 
context.translate(80, 80);
context.fillRect(0, 0, 75, 75);
 
context.lineWidth   = 2;
context.strokeStyle = "blue";
context.arc(100, 100, 20, 0, 2 * Math.PI);
context.fill();
context.stroke();
}
}

Here we apply shadow effect to 3 elements: 2 rectangles and 1 circle. When we draw circle with (100, 100) as its center, the origin is traced from (80, 80) and not (0, 0), as we draw the arc/circle after calling translate() method.

Translate Transformation in Canvas: HTML5

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

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

Note: Since all the elements which follow translate method will have a new origin, we can effectively use canvas status and save, restore the status to our advantage.