Scale Canvas

Scaling the canvas context

The scaleCanvas() method scales the canvas from the included point.

$('canvas')
.scaleCanvas({
x: 100, y: 100,
scaleX: 1.5,
scaleY: 3
})
.drawArc({
fillStyle: '#000',
x: 100, y: 100,
radius: 20
})
.restoreCanvas();

The scale property

You can also set both the scaleX and scaleY properties using the scale property.

$('canvas')
.scaleCanvas({
scale: 2
})
.drawRect({
fillStyle: '#000',
x: 100, y: 100,
width: 100, height: 50
})
.restoreCanvas();

Scaling an individual shape

Rather than scaling the entire canvas, you can scale an individual shape using any of these three properties: scale, scaleX, or scaleY.

// This square is scaled to be a rectangle
$('canvas').drawRect({
fillStyle: '#36c',
x: 200, y: 100,
width: 100, height: 100,
scaleX: 3
});

Layers

Although it may seem slightly counterintuitive, the scaleCanvas() 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').scaleCanvas({
layer: true,
name: 'scale1'
});

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

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

Notes

The scaleX and scaleY values are multiples of the canvas’s current width/height (i.e. 1 is the baseline).

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