With transformations, shapes drawn upon a Canvas can be moved to another spot on the Canvas, rotated, enlarged and reduced in size. I’ll be looking at how these transformations are achieved in this post, and explaining how they are applied.
Translation
To translate a shape means to change its location on the Canvas. In my example below, I have translated the square shape 100 pixels to the right.
View demo
The markup
ctx.translate is used along with X and Y values to move a shape. In my example, the values are 100, 0 – which will shift the shape 100 pixels from the left edge and keep it flush to the top of the Canvas.
Javascript portion
function draw() {
// Translation
var canvas = document.getElementById("translation");
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.translate(100, 0);
ctx.fillRect(0, 0, 150, 150);
}
}
HTML portion
<body onLoad="draw();"> <canvas id="translation" width="600" height="150"></canvas> </body>
Rotation
When a shape is be rotated, you have to remember that the rotation point is the top left point of the Canvas. So, you will usually have to translate the shape that you want to rotate first, as by rotating it around the top left point may move parts of the shape off the Canvas.
View demo
The markup
First of all, in my example I have translated the shape 130 pixels to the right – this is to ensure the whole shape is visible on the Canvas, as if it hadn’t been moved, most of the shape would have been moved off of the left hand side, and therefore not visible. Then, ctx.rotate is used along with a number representing the degrees by which the shape should be rotated – my shape is rotated by 45 degrees.
Javascript portion
function draw() {
// Rotation
var canvas = document.getElementById("rotation");
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.translate(130, 0);
ctx.rotate(45);
ctx.fillRect(0, 0, 150, 150);
}
}
HTML portion
<body onLoad="draw();"> <canvas id="rotation" width="600" height="210"></canvas> </body>
Scaling
Any shape on a Canvas can be enlarged or reduced. In my example below, I have enlarged a square shape, but the method for reducing the size of a shape is very similar, which I’ll explain in a moment.
View demo
The markup
ctx.scale is used before the shape is drawn along with two numbers as values, which mean the following:
- The first number gives the horizontal scale of the shape
- The second number gives the vertical scale of the shape
If a scale number is set as 1, this means the shape will stay its original size. In my example I have set the width and the height of my square as 150 pixels, then if I set the horizontal and the vertical scale as 1, my square will stay at this size of 150 pixels square. If change both of these numbers to 2, this will double the size of the shape, and 0.5 will halve the size of the shape.
Any other numbers can be used and will resize the shape accordingly; a lower number than 1 will shrink the shape, and a number higher than 1 will enlarge it.
If one of the numbers is larger than the other, this will stretch the shape.
So, in my example I set the values as 2, 2 – this makes the shape double its original size.
Javascript portion
function draw() {
// Scaling
var canvas = document.getElementById("scaling");
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.scale(2, 2);
ctx.fillRect (0, 0, 150, 150);
}
}
HTML portion
<body onLoad="draw();"> <canvas id="scaling" width="300" height="300"></canvas> </body>