Documentation

Learn all about jCanvas

jCanvas

• Introduction
• Syntax
• jCanvas Object
• Extending jCanvas
• Properties
• Methods

Canvas

• Clear Canvas
• Rotate Canvas
• Scale Canvas
• Translate Canvas
• Pixel Manipulation
• Get Canvas Image
• Draw Manually
• Detect Pixel Ratio

Drawings

• Arcs
• Arrows
• Curves
• Ellipses
• Images
• Lines
• Masking
• Paths
• Polygons
• Rectangles
• Slices
• Text
• Vectors

Layers

• Layer API
• Adding layers
• Retrieving layers
• Drawing layers
• Manipulating Layers
• Animating layers

Events

• Event API
• Mouse Events
• Mechanical Events
• Event Properties
• Draggable Layers
• Touch Events
• Event Hooks

Styles

• Colors
• Shadows
• Gradients
• Patterns
• Functions

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.