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
Syntax
All jCanvas methods are regular jQuery methods, and are used in the same manner. Calling a jCanvas method will apply to all canvas elements in the jQuery collection.
Basic Usage
Most jCanvas methods accept a map of properties, which may be listed in any order.
// Draw a circle on the canvas
$('canvas').drawArc({
fillStyle: 'black',
x: 100, y: 100,
radius: 50
});
Numeric Values
Most numeric property values are measured in pixels, although some are relative to the values of other properties. The description for any property will usually mention these special cases when necessary.
Chaining
Most jCanvas methods support chaining for cleaner and faster code.
$('canvas').drawArc({
fillStyle: 'black',
x: 100, y: 100,
radius: 50
})
.drawArc({
fillStyle: '#36b',
x: 300, y: 150,
radius: 50
});
Multiple Canvases
As demonstrated in the examples above, jCanvas can draw the same drawing on multiple canvases.
// Applies to all canvas elements
$('canvas').drawArc({
fillStyle: 'black',
x: 100, y: 100,
radius: 50
});
// Applies to all canvas elements with a class of 'demo'
$('canvas.demo').drawArc({
fillStyle: 'black',
x: 100, y: 100,
radius: 50
});