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

Colors

Color Names

$('canvas').drawArc({
  fillStyle: 'darkblue',
  x: 50, y: 50,
  radius: 30
});

Hex Values

$('canvas').drawArc({
  fillStyle: '#009',
  x: 50, y: 50,
  radius: 30
});

RGB Values

$('canvas').drawArc({
  fillStyle: 'rgb(0, 0, 153)',
  x: 50, y: 50,
  radius: 30
});

RGBA Values

$('canvas').drawArc({
  fillStyle: 'rgba(0, 0, 153, 0.5)',
  x: 50, y: 50,
  radius: 30
});