Style is used for changing the visual styles of items contained within a Paper.js project and is returned by item.style and project.currentStyle.

All properties of Style are also reflected directly in Item, i.e.: item.fillColor.

To set multiple style properties in one go, you can pass an object to item.style. This is a convenient way to define a style once and apply it to a series of items:

Example: Styling paths

var path = new Path.Circle(new Point(80, 50), 30);
path.style = {
    fillColor: new Color(1, 0, 0),
    strokeColor: 'black',
    strokeWidth: 5
};

Example: Styling text items

var text = new PointText(view.center);
text.content = 'Hello world.';
text.style = {
    fontFamily: 'Courier New',
    fontWeight: 'bold',
    fontSize: 20,
    fillColor: 'red',
    justification: 'center'
};

Example: Styling groups

var path1 = new Path.Circle({
    center: [100, 50],
    radius: 30
});

var path2 = new Path.Rectangle({
    from: [170, 20],
    to: [230, 80]
});

var group = new Group(path1, path2);

// All styles set on a group are automatically
// set on the children of the group:
group.style = {
    strokeColor: 'black',
    dashArray: [4, 10],
    strokeWidth: 4,
    strokeCap: 'round'
};

Properties

Stroke Style