Canvas Rotate

Posted in Canvas Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 128 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The HTML5 <canvas> element provides a powerful way to draw and manipulate graphics on the web. One of the essential transformations you can apply to your drawings is rotation.

This guide will cover the basics of rotating shapes and images on a canvas, including the syntax, key concepts, and practical examples.

💡 Syntax

To perform rotation on a canvas, you use the rotate method of the canvas's 2D context. The basic syntax for rotating the canvas context is:

Syntax

Copied

context.rotate(angle);

🧰 Attributes

context: The drawing context obtained from the canvas element.
angle: The angle in radians by which to rotate the context. Positive values rotate clockwise, and negative values rotate counterclockwise.

🔑 Key Concepts

Before diving into examples, it's essential to understand a few key concepts about canvas rotation:

Radians vs. Degrees: Angles in the rotate method are specified in radians. To convert degrees to radians, use the formula radians = degrees * (Math.PI / 180).
Transformation Matrix: The rotate method alters the transformation matrix of the canvas context, affecting all subsequent drawings.
Context Save and Restore: Use context.save() and context.restore() to save and restore the canvas state, ensuring that transformations do not affect other drawings unintentionally.

📄 Example

Let's create an example where we rotate a rectangle around its center:

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Rotate Example</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const context = canvas.getContext('2d');

    // Rectangle properties
    const rectWidth = 100;
    const rectHeight = 50;
    const rectX = canvas.width / 2;
    const rectY = canvas.height / 2;
    const angle = 45 * (Math.PI / 180); // Converting 45 degrees to radians

    context.translate(rectX, rectY); // Move to the center of the rectangle
    context.rotate(angle); // Rotate the context by 45 degrees
    context.fillStyle = 'blue';
    context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); // Draw the rectangle centered at the origin

    context.resetTransform(); // Reset the transformation matrix to the identity matrix
  </script>
</body>
</html>

🧠 How it works?

In this example:

We first translate the context to the center of the rectangle.
We then rotate the context by 45 degrees.
We draw the rectangle centered at the origin (0, 0) of the rotated context.
Finally, we reset the transformation matrix to avoid affecting future drawings.

🎉 Conclusion

Rotating shapes and images on a canvas can add dynamic visual effects and interactivity to your web applications. By understanding the basics of canvas rotation, you can create engaging graphics and animations.

Remember to use the context.save() and context.restore() methods to manage your transformations effectively, ensuring your canvas drawings remain organized and maintainable.