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

Draw Manually

With the draw() method, you can draw on the canvas using native canvas methods (or any method, for that matter). To do this, write your code inside a function

$('canvas').draw({
  fn: function(ctx) {
    ctx.fillStyle = '#333';
    ctx.fillRect(50, 50, 100, 100);
  }
});

Draw Anything

The draw() method can be used to draw any other jCanvas drawing (although usually this is not necessary).

$('canvas').draw({
  type: 'rectangle',
  fillStyle: '#c33',
  x: 100, y: 100,
  width: 100, height: 80
});

The above code is equivalent to the following:

$('canvas').drawRect({
  fillStyle: '#c33',
  x: 100, y: 100,
  width: 100, height: 80
});

Notes

The this keyword in the callback function refers to the canvas DOM element.