Paths

Bonsai provides a generic Path class for you to create arbitrary paths:

E.g.

new Path()
  .moveTo(0, 0)
  .lineTo(100, 100)
  .lineTo(0, 100)
  .closePath()
  .fill('blue')
  .addTo(stage);

Path constructor

The Path constructor accepts three different argument signatures:

String: SVG path

A String with space/comma separated path commands, as per the SVG Path spec:

new Path('l 100,0 l 0,100 l -100,0 l 0,-100');

Array: Path commands

An Array of arrays, each sub-array consistening of a command (e.g. lineTo) and its arguments:

new Path([
  ['moveTo', 0, 0],
  ['lineBy', 100, 0],
  ['lineBy', 0, 100],
  ['lineBy', -100, 0],
  ['lineBy', 0, -100]
]);

Array: Points of polygon

The x and y position of each point. Each coordinate takes up two array slots:

new Path([
  0, 0,
  100, 0,
  100, 100,
  0, 100
]);

Path special classes

Within Bonsai’s path module are a selection of shape classes. Note that these are globally exposed and inherit from the Path class.

Applying a fill to a shape

Path instances support the following fill attributes:

The quickest way to fill a shape is via the fill method:

var c = new Circle(50, 50, 50);
c.fill('red').addTo(stage);

// You can add a fillGradient on top of a fillColor too:
c.fill(gradient.linear(0, ['white', 'transparent']));

Applying a line to a Path

Path instances support the following line attributes:

The quickest way to apply a line to a shape is via the line method:

new Circle(60, 60, 50)
  .stroke('red', 5)
  .addTo(stage);