1. Translation:
Translation involves moving an object from one position to another along the x and y axes. In canvas, translation is achieved using the translate() method.
Here's an example:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a rectangle without translation
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);
// Apply translation and draw a rectangle at the translated position
ctx.translate(100, 50); // Move 100px right and 50px down
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
In this example, the second rectangle is drawn after applying a translation of 100 pixels to the right (x-axis) and 50 pixels down (y-axis).
2. Rotation:
Rotation involves rotating an object around a specific point. The rotation angle is specified in radians. Canvas provides the rotate() method for rotation.
Here's an example:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a rectangle without rotation
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 50, 50);
// Apply rotation and draw a rectangle at the rotated angle
ctx.translate(75, 75); // Move to center of the rectangle
ctx.rotate(Math.PI / 4); // Rotate 45 degrees (π/4 radians)
ctx.fillStyle = 'red';
ctx.fillRect(-25, -25, 50, 50); // Draw centered at (0,0)
In this example, the second rectangle is rotated by 45 degrees (π/4 radians) around its center.
3. Scaling:
Scaling involves resizing an object along the x and y axes. Canvas provides the scale() method for scaling objects. Here's an example:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a rectangle without scaling
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);
// Apply scaling and draw a scaled rectangle
ctx.scale(2, 0.5); // Scale horizontally by 2x and vertically by 0.5x
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
In this example, the second rectangle is scaled horizontally by 2 times and vertically by 0.5 times.
4. Skewing:
Skewing involves tilting or slanting an object along the x and y axes. Canvas provides the transform() method for skewing objects. Here's an example:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a rectangle without skewing
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);
// Apply skewing and draw a skewed rectangle
ctx.transform(1, 0.5, 0.5, 1, 0, 0); // Skew horizontally and vertically
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
In this example, the second rectangle is skewed horizontally and vertically.
Using Transformations Together:
Transformations can be combined to create complex effects. For example, rotating an object after translating it will rotate the object around a specific point rather than the canvas origin. Here's an example combining rotation and translation:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a rectangle without rotation
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 50, 50);
// Apply translation and rotation
ctx.translate(75, 75); // Move to center of the rectangle
ctx.rotate(Math.PI / 4); // Rotate 45 degrees (π/4 radians)
ctx.fillStyle = 'red';
ctx.fillRect(-25, -25, 50, 50); // Draw centered at (0,0)
In this example, the rectangle is rotated by 45 degrees around its center point.
Practice Excercise Practice now