Rotate Canvas

Rotating the canvas context

The rotateCanvas() method rotates the canvas from the included point.

The x and y properties define the center of rotation.

$('canvas')
  .rotateCanvas({
    rotate: 45,
    x: 100, y: 100
  })
  .drawRect({
    fillStyle: '#000',
    x: 100, y: 100,
    width: 100, height: 50
  })
  .restoreCanvas();

Rotating an individual shape

Rather than rotating the entire canvas, you can rotate an individual shape using the rotate properties.

// Rotate this rectangle by 30 degrees
$('canvas').drawRect({
  fillStyle: '#c33',
  x: 200, y: 100,
  width: 150, height: 80,
  rotate: 30
});

Please note that you can offset the center of rotation by specifying the translateX and translateY properties.

// Rectangle rotates from its center
$('canvas').drawRect({
  fillStyle: '#c33',
  x: 150, y: 100,
  width: 150, height: 80,
  rotate: 30
});
// Rectangle rotates from its top-left corner
$('canvas').drawRect({
  fillStyle: '#6c3',
  x: 150, y: 100,
  width: 150, height: 80,
  translateX: 75, // width / 2
  translateY: 40, // height / 2
  rotate: 30
});

Layers

Although it may seem slightly counterintuitive, the rotateCanvas() method can actually be drawn as a layer. This allows for applying canvas transformations when drawing layers.

To do this, set the layer property to true, just as you would to make any other shape a layer. In addition, just as you can with any other type of layer, you can give this layer a name using the name property.

$('canvas').rotateCanvas({
  layer: true,
  name: 'rotate1'
});

However, whenever you’re done rotating the canvas, you must restore the transformation using the restoreCanvas() method.

$('canvas').restoreCanvas({
  layer: true
});

Notes

To revert to the canvas’s previous state, call the restoreCanvas() method. However, you do not need to call this method when rotating an individual shape.