Style

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

• view

  The view that this style belongs to.

  Read only.

  • Type:

  • View

Stroke Style

• strokeColor

  The color of the stroke.

  • Type:

  • Color⟋null

  Example:Setting the stroke color of a path:

  // Create a circle shaped path at { x: 80, y: 50 }
  // with a radius of 35:
  var circle = new Path.Circle(new Point(80, 50), 35);
  
  // Set its stroke color to RGB red:
  circle.strokeColor = new Color(1, 0, 0);

• strokeWidth

  The width of the stroke.

  • Default:

  • 1

  • Type:

  • Number

  Example:Setting an item's stroke width:

  // Create a circle shaped path at { x: 80, y: 50 }
  // with a radius of 35:
  var circle = new Path.Circle(new Point(80, 50), 35);
  
  // Set its stroke color to black:
  circle.strokeColor = 'black';
  
  // Set its stroke width to 10:
  circle.strokeWidth = 10;

• strokeCap

  The shape to be used at the beginning and end of open Path items, when they have a stroke.

  • Values:

  • 'round', 'square', 'butt'

  • Default:

  • 'butt'

  • Type:

  • String

  Example:A look at the different stroke caps:

  var line = new Path(new Point(80, 50), new Point(420, 50));
  line.strokeColor = 'black';
  line.strokeWidth = 20;
  
  // Select the path, so we can see where the stroke is formed:
  line.selected = true;
  
  // Set the stroke cap of the line to be round:
  line.strokeCap = 'round';
  
  // Copy the path and set its stroke cap to be square:
  var line2 = line.clone();
  line2.position.y += 50;
  line2.strokeCap = 'square';
  
  // Make another copy and set its stroke cap to be butt:
  var line2 = line.clone();
  line2.position.y += 100;
  line2.strokeCap = 'butt';

• strokeJoin

  The shape to be used at the segments and corners of Path items when they have a stroke.

  • Values:

  • 'miter', 'round', 'bevel'

  • Default:

  • 'miter'

  • Type:

  • String

  Example:A look at the different stroke joins:

  var path = new Path();
  path.add(new Point(80, 100));
  path.add(new Point(120, 40));
  path.add(new Point(160, 100));
  path.strokeColor = 'black';
  path.strokeWidth = 20;
  
  // Select the path, so we can see where the stroke is formed:
  path.selected = true;
  
  var path2 = path.clone();
  path2.position.x += path2.bounds.width * 1.5;
  path2.strokeJoin = 'round';
  
  var path3 = path2.clone();
  path3.position.x += path3.bounds.width * 1.5;
  path3.strokeJoin = 'bevel';

• strokeScaling

  Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke.

  • Default:

  • true

  • Type:

  • Boolean

• dashOffset

  The dash offset of the stroke.

  • Default:

  • 0

  • Type:

  • Number

• dashArray

  Specifies an array containing the dash and gap lengths of the stroke.

  • Default:

  • []

  • Type:

  • Array of Numbers

  Example:

  var path = new Path.Circle(new Point(80, 50), 40);
  path.strokeWidth = 2;
  path.strokeColor = 'black';
  
  // Set the dashed stroke to [10pt dash, 4pt gap]:
  path.dashArray = [10, 4];

• miterLimit

  The miter limit of the stroke. When two line segments meet at a sharp angle and miter joins have been specified for strokeJoin, it is possible for the miter to extend far beyond the strokeWidth of the path. The miterLimit imposes a limit on the ratio of the miter length to the strokeWidth.

  • Default:

  • 10

  • Type:

  • Number

Fill Style

• fillColor

  The fill color.

  • Type:

  • Color⟋null

  Example:Setting the fill color of a path to red:

  // Create a circle shaped path at { x: 80, y: 50 }
  // with a radius of 35:
  var circle = new Path.Circle(new Point(80, 50), 35);
  
  // Set the fill color of the circle to RGB red:
  circle.fillColor = new Color(1, 0, 0);

• fillRule

  The fill-rule with which the shape gets filled. Please note that only modern browsers support fill-rules other than 'nonzero'.

  • Values:

  • 'nonzero', 'evenodd'

  • Default:

  • 'nonzero'

  • Type:

  • String

Shadow Style

• shadowColor

  The shadow color.

  • Type:

  • Color⟋null

  Example:Creating a circle with a black shadow:

  var circle = new Path.Circle({
      center: [80, 50],
      radius: 35,
      fillColor: 'white',
      // Set the shadow color of the circle to RGB black:
      shadowColor: new Color(0, 0, 0),
      // Set the shadow blur radius to 12:
      shadowBlur: 12,
      // Offset the shadow by { x: 5, y: 5 }
      shadowOffset: new Point(5, 5)
  });

• shadowBlur

  The shadow’s blur radius.

  • Default:

  • 0

  • Type:

  • Number

• shadowOffset

  The shadow’s offset.

  • Default:

  • 0

  • Type:

  • Point

Selection Style

• selectedColor

  The color the item is highlighted with when selected. If the item does not specify its own color, the color defined by its layer is used instead.

  • Type:

  • Color⟋null

Character Style

• fontFamily

  The font-family to be used in text content.

  • Default:

  • 'sans-serif'

  • Type:

  • String

• fontWeight

  The font-weight to be used in text content.

  • Default:

  • 'normal'

  • Type:

  • String⟋Number

• fontSize

  The font size of text content, as a number in pixels, or as a string with optional units 'px', 'pt' and 'em'.

  • Default:

  • 10

  • Type:

  • Number⟋String

• leading

  The text leading of text content.

  • Default:

  • fontSize * 1.2

  • Type:

  • Number⟋String

Paragraph Style

• justification

  The justification of text paragraphs.

  • Values:

  • 'left', 'right', 'center'

  • Default:

  • 'left'

  • Type:

  • String