This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

rotate

Summary

Addd the rotation transformation described by the argument to the transformation matrix. The angle argument represents a clockwise rotation angle expressed in radians.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var object = object.rotate(angle);

Parameters

angle

Data-type
Number

The rotation angle, in radians.

Return Value

Returns an object of type DOM NodeDOM Node

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Examples

This basic example draws two rects, the second rotated 45°, converted to radians

ctx.translate(120,120);
ctx.fillStyle = "lime";
ctx.fillRect(0,0,100,100);
ctx.rotate((Math.PI/180) * 45); // draws the second rect 45° rotated
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(0,0,100,100);

This full example draws two rects, the second rotated 45°

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Example</title>
  <script>
    function draw() {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {  // check for support
        var ctx = canvas.getContext("2d");

        // clear background
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.translate(120,120);
        ctx.fillStyle = "lime";
        ctx.fillRect(0,0,100,100);
        ctx.rotate((Math.PI/180) * 45); // draws the second rect 45° rotated
        ctx.fillStyle = "rgba(255,0,0,0.5)";
        ctx.fillRect(0,0,100,100);

      }
    }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
</body>
</html>

Notes

Rotation is based on the current origin which is most of the time the upper left corner. Use rectWidth/-2 as an offsetX and rectHeight/-2 as offsetY to draw the rotated rect with a centered origin.

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation

Attributions