Canvas Rotate

Last Updated:

How to Rotate

Your browser does not support the canvas element.

To rotate a canvas object, follow these steps

  1. canvas - Assigning the canvas element to a variable.
  2. ctx - Assigning the 2d rendering context to another variable by calling the getContext('2d') method.
  3. rotate() - Use rotate() canvas method to add a rotation to the transformation matrix.
  4. fillStyle - Use fillStyle canvas property to specify the color to use inside shapes (any shape).
  5. fillRect() - Use fillRect() canvas method to draws a rectangle that is filled according to the current fillStyle.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="100" height="150"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById('point'); var ctx = canvas.getContext('2d'); ctx.rotate(60 * Math.PI / 180); ctx.fillStyle = '#339933'; ctx.fillRect(50, 0, 100, 20); </script> </body> </html>

Syntax

ctx.rotate(angle)

Attributes Value

ValueExplanation
angle Specifies the rotation angle, clockwise in radians. You can use degree * Math.PI / 180 if you want to calculate from a degree value.

Share this Page

Meet the Author