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

Slices

A slice in jCanvas is, essentially, a slice of a circle (similar to a pizza slice).

Basic Usage

You can draw a slice using the drawSlice() method. The size of a slice is determined by its start, end, and radius properties.

The position of a slice is determined by its x and y properties. These coordinates lie at the tip of the slice.

// Draw a 60° slice
$('canvas').drawSlice({
  fillStyle: '#f63',
  x: 100, y: 100,
  radius: 150,
  // start and end angles in degrees
  start: 60, end: 120
});

Creating a pie chart

You can create a simple pie chart in jCanvas using the drawSlice() method.

In the example below, the spread property determines the spacing between slices. The property’s value is a multiple of the slice’s radius (from 0 to 1).

$('canvas')
.drawSlice({
  layer: true,
  name: 'red-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#c33',
  x: 180, y: 110,
  start: -45, end: 15,
  radius: 100,
  spread: 1 / 40
})
.drawSlice({
  layer: true,
  name: 'green-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#6c0',
  x: 180, y: 110,
  start: -135, end: -45,
  radius: 100,
  spread: 1 / 40
})
.drawSlice({
  layer: true,
  name: 'blue-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#36c',
  x: 180, y: 110,
  start: 15, end: -135,
  radius: 100,
  spread: 1 / 40
});

To add a text label to your pie chart, create a text layer using the drawText() method.

$('canvas')
.drawSlice({
  layer: true,
  name: 'red-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#c33',
  x: 180, y: 110,
  start: -45, end: 15,
  radius: 100,
  spread: 1 / 40
})
.drawSlice({
  layer: true,
  name: 'green-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#6c0',
  x: 180, y: 110,
  start: -135, end: -45,
  radius: 100,
  spread: 1 / 40
})
.drawSlice({
  layer: true,
  name: 'blue-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#36c',
  x: 180, y: 110,
  start: 15, end: -135,
  radius: 100,
  spread: 1 / 40
})
.drawText({
  layer: true,
  name: 'red-label',
  groups: ['chart', 'labels'],
  fillStyle: '#fff',
  x: 160, y: 50,
  fontFamily: 'sans-serif',
  fontSize: 20,
  text: '17%'
})
.drawText({
  layer: true,
  name: 'green-label',
  groups: ['chart', 'labels'],
  fillStyle: '#fff',
  x: 120, y: 115,
  fontFamily: 'sans-serif',
  fontSize: 20,
  text: '25%'
})
.drawText({
  layer: true,
  name: 'blue-label',
  groups: ['chart', 'labels'],
  fillStyle: '#fff',
  x: 220, y: 150,
  fontFamily: 'sans-serif',
  fontSize: 20,
  text: '58%'
})