HTML Canvas Transformations Tutorial

Transformations in the HTML5 <canvas> element allow you to scale, rotate, move, and skew shapes and images. This flexibility is useful for animations, games, and complex graphical manipulations.

In this tutorial, you’ll learn:

1. What transformations are and their importance.
2. Common transformation methods.
3. Combining transformations.
4. Practical examples of canvas transformations.

1. What Are Transformations?

Transformations modify the drawing context to change the appearance or position of shapes and images. They include:

• Translation: Moves objects to a new position.
• Scaling: Changes the size of objects.
• Rotation: Rotates objects around a pivot point.
• Skewing: Distorts objects by stretching along the X or Y axis.

All transformations affect subsequent drawings on the canvas unless the transformation matrix is reset.

2. Basic Transformation Methods

3. Using Translation

Translation moves the canvas origin to a new position.

Example 1: Translating a Rectangle

<canvas id="myCanvas" width="400" height="200" style="border: 1px solid black;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Original rectangle
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 100, 50);

    // Translate the origin
    ctx.translate(150, 50);

    // Translated rectangle
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 100, 50);
</script>

Explanation:

• translate(150, 50) moves the origin by 150px along the X-axis and 50px along the Y-axis.
• All subsequent drawings are shifted relative to the new origin.

4. Using Scaling

Scaling changes the size of objects.

Example 2: Scaling a Rectangle

// Original rectangle
ctx.fillStyle = "green";
ctx.fillRect(50, 50, 100, 50);

// Scale the context
ctx.scale(2, 0.5);

// Scaled rectangle
ctx.fillStyle = "purple";
ctx.fillRect(50, 50, 100, 50);

Explanation:

• scale(2, 0.5) doubles the width and halves the height of subsequent drawings.
• The scaling applies to both fill and stroke operations.

5. Using Rotation

Rotation rotates the canvas around the origin.

Example 3: Rotating a Rectangle

// Move origin to center of canvas
ctx.translate(200, 100);

// Rotate 45 degrees (π/4 radians)
ctx.rotate(Math.PI / 4);

// Draw rotated rectangle
ctx.fillStyle = "orange";
ctx.fillRect(-50, -25, 100, 50); // Centered rectangle

Explanation:

• rotate(angle) rotates subsequent drawings around the current origin.
• Translate the origin to the shape’s center for intuitive rotation.

6. Combining Transformations

Transformations can be combined for complex effects.

Example 4: Translation, Scaling, and Rotation

// Translate to new origin
ctx.translate(150, 100);

// Scale
ctx.scale(1.5, 0.8);

// Rotate
ctx.rotate(Math.PI / 6);

// Draw rectangle with all transformations
ctx.fillStyle = "pink";
ctx.fillRect(-50, -25, 100, 50);

Tip: The order of transformations matters. For example, rotating before translating will yield a different result than translating first.

7. Resetting Transformations

Example 5: Using resetTransform

// Draw original rectangle
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 50);

// Apply transformations
ctx.translate(200, 100);
ctx.rotate(Math.PI / 4);
ctx.scale(1.2, 1.2);
ctx.fillStyle = "red";
ctx.fillRect(-50, -25, 100, 50);

// Reset transformations
ctx.resetTransform();

// Draw rectangle after reset
ctx.fillStyle = "green";
ctx.fillRect(50, 150, 100, 50);

Explanation:

• resetTransform() restores the transformation matrix to its default state.
• Subsequent drawings are not affected by earlier transformations.

8. Using the transform Method

The transform method applies a custom transformation matrix.

Syntax:

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

Where:

• a, b, c, d define the scaling and rotation.
• e, f define translation.

Example 6: Skewing a Rectangle

// Skew the rectangle
ctx.transform(1, 0.5, 0, 1, 0, 0);

// Draw skewed rectangle
ctx.fillStyle = "cyan";
ctx.fillRect(50, 50, 100, 50);

9. Practical Example: Windmill Animation

Example 7: Rotating Windmill Blades

<canvas id="windmill" width="400" height="400" style="border: 1px solid black;"></canvas>
<script>
    const canvas = document.getElementById("windmill");
    const ctx = canvas.getContext("2d");

    let angle = 0;

    function drawWindmill() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw base
        ctx.fillStyle = "brown";
        ctx.fillRect(190, 300, 20, 100);

        // Move origin to center of blades
        ctx.save(); // Save the current state
        ctx.translate(200, 200);
        ctx.rotate(angle);

        // Draw blades
        ctx.fillStyle = "gray";
        for (let i = 0; i < 4; i++) {
            ctx.rotate(Math.PI / 2); // Rotate 90 degrees
            ctx.fillRect(-10, 0, 20, 100);
        }
        ctx.restore(); // Restore to the original state

        angle += 0.05; // Increment angle
        requestAnimationFrame(drawWindmill);
    }

    drawWindmill();
</script>

Explanation:

1. Use save() and restore() to isolate transformations.
2. Animate the rotation using requestAnimationFrame.

10. Best Practices for Transformations

1. Use save and restore:
   • Always wrap transformations with save() and restore() to avoid unintended effects on other shapes.
2. Understand Transformation Order:
   • Transformations are applied in the order they are written.
3. Reset When Necessary:
   • Use resetTransform() to clear the transformation matrix if needed.
4. Avoid Excessive Nesting:
   • Too many transformations can make debugging difficult.

11. Browser Support

All modern browsers support the Canvas Transformation API:

12. Conclusion

In this tutorial, you learned:

1. How to use canvas transformations like translation, scaling, and rotation.
2. How to combine transformations for advanced effects.
3. How to reset and manage transformations effectively.

Transformations are a powerful tool in the Canvas API, enabling dynamic and flexible rendering.