HTML5 Canvas Scale, Rotate and Custom Transformation Tutorial

If you are a regular follower of Techglimpse, then you might have read our HTML5 tutorials; where we learnt about custom shapes, clipping region, composite operations and etc…Sometimes the shapes alone will not be enough and you might want to do some operations with it. Well, apart from the composite operations, you may want to scale, rotate and custom transform the canvas context. You got it! Today we are going to learn about Canvas Transformations.

In order to scale HTML5 Canvas, you can use scale() transform method. The method allows you to scale the current drawing to bigger or smaller.

Scale() syntax:

context.scale(scalewidth,scaleheight);

Here, the scalewidth scales the drawing width and the scaleheight scales the drawing height (where 0.5=50%, 1=100%, 2=200% etc…)

Lets see the code now.

<canvas id="scale" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('scale');
var context = canvas.getContext('2d');
var center_X = canvas.width / 2;
var center_Y = canvas.height / 2;
context.strokeRect(15,15,35,25);
context.scale(2,2);
context.strokeRect(15,15,35,25);
context.scale(2,2);
context.strokeRect(15,15,35,25);
context.scale(2,2);
context.strokeRect(15,15,35,25);
</script>

The above code draws a rectangle, scales it to 200%, draw a rectangle again, scale it to 200%, draw a rectangle again and scale it to 200%.

Rotate Canvas

You can use rotate() transform method to rotate the canvas. The method takes rotation angle as parameter, which is represented in radians.  The rotation will work only for the drawings that is drawn after the rotation is set.

<canvas id="rotate" width="500" height="200"></canvas>
<script>
var canvas=document.getElementById("rotate");
var context=canvas.getContext("2d");
context.rotate(20*Math.PI/180);
context.fillStyle = '#e8493f';
context.fillRect(50,40,150,70);
context.fill();
context.stroke();
</script>

The above code rotates the rectangle by 20 degrees. So the radian will be 20*Math.PI/180.

Custom Transformation

By default every object in the canvas will have its own transformation defined; in the form of transformation matrix. Now whenever you apply another transformation using transform() method, the existing transformation of the object will be replaced with multiples of current transformation matrix and new transformation matrix. For example, lets assume you have rectangle drawn in the canvas and have already set to scale by two and applying transform() method to scale it by 2, now actually the rectangle will scale by 4.

Ok! Probably I would have confused you, so let me try to explain it in other words. The transform() method will scale, rotate or apply any transformation on the current context.

Moreover, the transformation will affect objects that are drawn after the transform() method is called.

Syntax:

context.transform(a,b,c,d,e,f);

Where a: Scales the drawing horizontally

b: Skew the drawing horizontally

c: Skew the drawing vertically

d: Scales the drawing vertically

e: Moves the drawing horizontally

f: Moves the drawing vertically

<canvas id="transform" width="500" height="200"></canvas>
<script>
var canvas=document.getElementById("transform");
var context=canvas.getContext("2d");
context.fillStyle="#d54c25";
context.fillRect(0,0,250,100)
context.transform(1,0.5,-0.5,1,50,10);
context.fillStyle="#1368aa";
context.fillRect(0,0,250,100);
context.transform(1,0.5,-0.5,1,30,10);
context.fillStyle="#4db849";
context.fillRect(0,0,250,100);
</script>

That’s it!. Checkout the demo and if you like the post, please do share it with HTML5 Community.