Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Canvas Rotate

Posted in Canvas Tutorial
Updated on May 19, 2024
By Mari Selvan
👁️ 112 - Views
⏳ 4 mins
💬 1 Comment
Canvas Rotate

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
Copy To Clipboard
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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy