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

Gradients

The createGradient() method returns a canvas gradient object, which is used as a fill or stroke style.

Gradient colors are defined using c1, c2, c3, and so on. Optional color stops are defined using s1, s2, s3, and so on (and can be any number from 0 through 1).

Linear

var linear = $('canvas').createGradient({
  x1: 0, y1: 20,
  x2: 0, y2: 80,
  c1: 'rgb(0, 0, 0)',
  c2: '#0f0',
  c3: 'blue'
});
$('canvas').drawArc({
  fillStyle: linear,
  x: 50, y: 50,
  radius: 30
});

var linear = $('canvas').createGradient({
  x1: 0, y1: 20,
  x2: 0, y2: 80,
  c1: 'rgb(0, 0, 0)',
  c2: '#0f0', s2: 0.2,
  c3: 'blue', s3: 0.5
});
$('canvas').drawArc({
  fillStyle: linear,
  x: 50, y: 50,
  radius: 30
});

Radial

Radial gradients are created when the r1 or r2 properties are defined.

var radial = $('canvas').createGradient({
  x1: 50, y1: 50,
  x2: 50, y2: 50,
  r1: 10, r2: 30,
  c1: 'rgba(255, 0, 0, 0.75)',
  c2: '#000'
});
$('canvas').drawArc({
  fillStyle: radial,
  x: 50, y: 50,
  radius: 30
});

Animating Layers with Gradients

There are cases where you may wish to animate a layer that has a gradient fill/stroke. However, animating the layer’s position or size will leave the gradient unaffected, because gradients are relative to the canvas.

To demonstrate this behavior, consider the following example:

// Create and store a linear gradient
var gradient = $('canvas').createGradient({
  // Gradient is drawn relative to layer position
  x1: 0, y1: 20,
  x2: 0, y2: 140,
  c1: '#36c', c2: '#c33'
});
// Create layer with gradient fill
$('canvas').drawRect({
  layer: true,
  name: 'box',
  fillStyle: gradient,
  x: 100, y: 80,
  width: 100, height: 60
});
// Animate layer
$('canvas').animateLayer('box', {
  x: 220, y: 150
}, 1000);

To solve this problem, by using a function as the layer’s fill/stroke style, you can achieve a gradient which moves with its layer. Note that the below example assumes that the gradient’s coordinates are relative to the layer’s size and position.

// Create layer with gradient fill
$('canvas').drawRect({
  layer: true,
  name: 'box',
  // Define fill as a function
  fillStyle: function(layer) {
    return $(this).createGradient({
      // Gradient is drawn relative to layer position
      x1: 0, y1: layer.y - layer.height,
      x2: 0, y2: layer.y + layer.height,
      c1: '#36c', c2: '#c33'
    });
  },
  x: 100, y: 80,
  width: 100, height: 60
});
// Animate layer
$('canvas').animateLayer('box', {
  x: 220, y: 150
}, 1000);

Notes

Color stops are optional, and are measured from 0 to 1.