Style is used for changing the visual styles of items contained within a Paper.js project and is returned by 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 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); = {
    fillColor: new Color(1, 0, 0),
    strokeColor: 'black',
    strokeWidth: 5

Example: Styling text items

var text = new PointText(;
text.content = 'Hello world.'; = {
    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: = {
    strokeColor: 'black',
    dashArray: [4, 10],
    strokeWidth: 4,
    strokeCap: 'round'


Stroke Style

Powered by Fruition