Documentation
Learn all about jCanvasjCanvas
Canvas
- Clear Canvas
- Rotate Canvas
- Scale Canvas
- Translate Canvas
- Pixel Manipulation
- Get Canvas Image
- Draw Manually
- Detect Pixel Ratio
Drawings
Layers
Events
Styles
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.