Paper.jsTypogram

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

PreviousSymbolItemNextColor