Creates a new raster item from the passed argument, and places it in the active layer. object can either be a DOM Image, a Canvas, or a string describing the URL to load the image from, or the ID of a DOM element to get the image from (either a DOM Image or a Canvas).

Parameters:
• source: HTMLImageElement / Canvas / String — the source of the raster — optional
• position: HTMLImageElement / Canvas / String — the center position at which the raster item is placed. — optional

Example — Creating a raster using a url

Example — Creating a raster using the id of a DOM Image:

// Create a raster using the id of the image:
var raster = new Raster('art');

Example — Creating a raster using a DOM Image:

// Find the element using its id:
var imageElement = document.getElementById('art');

// Create the raster:
var raster = new Raster(imageElement);

Example

The size of the raster in pixels.

Type:
• Size

The width of the raster in pixels.

Type:
• Number

The height of the raster in pixels.

Type:
• Number

Pixels per inch of the raster at its current size.

Type:
• Size

The Canvas 2d drawing context of the raster.

Type:
• Context

The HTMLImageElement of the raster, if one is associated.

Type:
• HTMLImageElement / Canvas

The source of the raster, which can be set using a DOM Image, a Canvas, a data url, a string describing the URL to load the image from, or the ID of a DOM element to get the image from (either a DOM Image or a Canvas).

Reading this property will return the url of the source image or a data-url.

Type:
• HTMLImageElement / Canvas / String

Example

Example

Parameters:
• rect: Rectangle — the boundaries of the sub image in pixel coordinates

Returns:
• Canvas

Returns a Base 64 encoded data: URL representation of the raster.

Returns:
• String

Draws an image on the raster.

Parameters:
• image: HTMLImageELement / Canvas
• point: Point — the offset of the image as a point in pixel coordinates

Calculates the average color of the image within the given path, rectangle or point. This can be used for creating raster image effects.

Parameters:
• object: Path / Rectangle / Point

Returns:
• Color — the average color contained in the area covered by the specified path, rectangle or point.

Gets the color of a pixel in the raster.

Parameters:
• x: — the x offset of the pixel in pixel coordinates
• y: — the y offset of the pixel in pixel coordinates

Returns:
• Color — the color of the pixel

Gets the color of a pixel in the raster.

Parameters:
• point: — the offset of the pixel as a point in pixel coordinates

Returns:
• Color — the color of the pixel

Sets the color of the specified pixel to the specified color.

Parameters:
• x: — the x offset of the pixel in pixel coordinates
• y: — the y offset of the pixel in pixel coordinates
• color: — the color that the pixel will be set to

Sets the color of the specified pixel to the specified color.

Parameters:
• point: — the offset of the pixel as a point in pixel coordinates
• color: — the color that the pixel will be set to

Parameters:
• size: Size

Returns:
• ImageData

Parameters:
• rect: Rectangle

Returns:
• ImageData

Parameters:
• data: ImageData
• point: Point

Returns:
• ImageData

The unique id of the item.

Type:
• Number

The type of the item as a string.

Type:
• String('group', 'layer', 'path', 'compound-path', 'raster', 'placed-symbol', 'point-text')

The name of the item. If the item has a name, it can be accessed by name through its parent's children list.

Type:
• String

Example

The path style of the item.

Type:
• Style

Example — Applying several styles to an item in one go, by passing an object to its style property:

Example — Copying the style of another item:

Example — Applying the same style object to multiple items:

Specifies whether the item is visible. When set to false, the item won't be drawn.

Default:
• true

Type:
• Boolean

Example — Hiding an item:

The blend mode of the item.

Default:
• 'normal'

Type:
• String('normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten', 'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color', 'add', 'subtract', 'average', 'pin-light', 'negation')

Example — Setting an item's blend mode:

The opacity of the item as a value between 0 and 1.

Default:
• 1

Type:
• Number

Example — Making an item 50% transparent:

Specifies whether the item directly transforms its contents when transformations are applied to it, or wether it simply stores them in item.matrix.

Default:
• false

Type:
• Boolean

Specifies whether an item is selected and will also return true if the item is partially selected (groups with some selected or partially selected paths).

Paper.js draws the visual outlines of selected items on top of your project. This can be useful for debugging, as it allows you to see the construction of paths, position of path curves, individual segment points and bounding boxes of symbol and raster items.

Type:
• Boolean

See also: project.selectedItems, segment.selected, point.selected

Example — Selecting an item:

Specifies whether the item defines a clip mask. This can only be set on paths, compound paths, and text frame objects, and only if the item is already contained within a clipping group.

Type:
• Boolean

A plain javascript object which can be used to store arbitrary data on the item.

Type:
• Object

Example

var path = new Path();
path.data.remember = 'milk';

Example

var path = new Path();
path.data.malcolm = new Point(20, 30);
console.log(path.data.malcolm.x); // 20

Example

var path = new Path();
path.data = {
	home: 'Omicron Theta',
	found: 2338,
	pets: ['Spot']
};
console.log(path.data.pets.length); // 1

Example

var path = new Path({
	data: {
		home: 'Omicron Theta',
		found: 2338,
		pets: ['Spot']
	}
});
console.log(path.data.pets.length); // 1

The item's position within the project. This is the rectangle.center of the item's bounds rectangle.

Type:
• Point

Example — Changing the position of a path:

Example — Changing the x coordinate of an item's position:

The item's transformation matrix, defining position and dimensions in the document.

Type:
• Matrix

The bounding rectangle of the item excluding stroke width.

Type:
• Rectangle

The bounding rectangle of the item including stroke width.

Type:
• Rectangle

The bounding rectangle of the item including handles.

Type:
• Rectangle

The project that this item belongs to.

Type:
• Project

The layer that this item is contained within.

Type:
• Layer

The item that this item is contained within.

Type:
• Item

Example

var path = new Path();

// New items are placed in the active layer:
console.log(path.parent == project.activeLayer); // true

var group = new Group();
group.addChild(path);

// Now the parent of the path has become the group:
console.log(path.parent == group); // true

Example — Setting the parent of the item to another item

var path = new Path();

// New items are placed in the active layer:
console.log(path.parent == project.activeLayer); // true

var group = new Group();
group.parent = path;

// Now the parent of the path has become the group:
console.log(path.parent == group); // true

// The path is now contained in the children list of group:
console.log(group.children[0] == path); // true

Example — Setting the parent of an item in the constructor

var group = new Group();

var path = new Path({
	parent: group
});

// The parent of the path is the group:
console.log(path.parent == group); // true

// The path is contained in the children list of group:
console.log(group.children[0] == path); // true

The children items contained within this item. Items that define a name can also be accessed by name.

Please note: The children array should not be modified directly using array functions. To remove single items from the children list, use item.remove(), to remove all items from the children list, use item.removeChildren(). To add items to the children list, use item.addChild(item) or item.insertChild(index, item).

Type:
• Array of Item objects

Example — Accessing items in the children array:

Example — Accessing children by name:

Example — Passing an array of items to item.children:

The first item contained within this item. This is a shortcut for accessing item.children[0].

Type:
• Item

The last item contained within this item.This is a shortcut for accessing item.children[item.children.length - 1].

Type:
• Item

The next item on the same level as this item.

Type:
• Item

The previous item on the same level as this item.

Type:
• Item

The index of this item within the list of its parent's children.

Type:
• Number

The color of the stroke.

Type:
• Color

Example — Setting the stroke color of a path:

The width of the stroke.

Type:
• Number

Example — Setting an item's stroke width:

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

Default:
• 'butt'

Type:
• String('round', 'square', 'butt')

Example — A look at the different stroke caps:

The shape to be used at the corners of paths when they have a stroke.

Default:
• 'miter'

Type:
• String('miter', 'round', 'bevel')

Example — A look at the different stroke joins:

The dash offset of the stroke.

Default:
• 0

Type:
• Number

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

Default:
• []

Type:
• Array

Example

The miter limit of the stroke.

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

Default:
• 10

Type:
• Number

The fill color of the item.

Type:
• Color

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

Item level handler function to be called on each frame of an animation.

The function receives an event object which contains information about the frame event:

event.count: the number of times the frame event was fired.

event.time: the total amount of time passed since the first frame event in seconds.

event.delta: the time passed in seconds since the last frame event.

Type:
• Function

See also: view.onFrame

Example — Creating an animation:

The function to be called when the mouse button is pushed down on the item. The function receives a MouseEvent object which contains information about the mouse event.

Type:
• Function

Example — Press the mouse button down on the circle shaped path, to make it red:

Example — Press the mouse on the circle shaped paths to remove them:

The function to be called when the mouse button is released over the item.

The function receives a MouseEvent object which contains information about the mouse event.

Type:
• Function

Example — Release the mouse button over the circle shaped path, to make it red:

The function to be called when the mouse clicks on the item. The function receives a MouseEvent object which contains information about the mouse event.

Type:
• Function

Example — Click on the circle shaped path, to make it red:

Example — Click on the circle shaped paths to remove them:

The function to be called when the mouse double clicks on the item. The function receives a MouseEvent object which contains information about the mouse event.

Type:
• Function

Example — Double click on the circle shaped path, to make it red:

Example — Double click on the circle shaped paths to remove them:

The function to be called repeatedly when the mouse moves on top of the item. The function receives a MouseEvent object which contains information about the mouse event.

Type:
• Function

Example — Move over the circle shaped path, to change its opacity:

The function to be called when the mouse moves over the item. This function will only be called again, once the mouse moved outside of the item first. The function receives a MouseEvent object which contains information about the mouse event.

Type:
• Function

Example — When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.

Example — When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.

The function to be called when the mouse moves out of the item.

The function receives a MouseEvent object which contains information about the mouse event.

Type:
• Function

Example — Move the mouse over the circle shaped path and then move it out of it again to set its fill color to red:

Sets those properties of the passed object literal on this item to the values defined in the object literal, if the item has property of the given name (or a setter defined for it).

Parameters:
• props: Object

Returns:
• Item — the item itself.

Example — Setting properties through an object literal

Specifies wether the item has any content or not. The meaning of what content is differs from type to type. For example, a Group with no children, a TextItem with no text content and a Path with no segments all are considered empty.

Checks whether the item and all its parents are inserted into the DOM or not.

Returns:
• Boolean — true if the item is inserted into the DOM, false otherwise

Clones the item within the same project and places the copy above the item.

Returns:
• Item — the newly cloned item

Example — Cloning items:

When passed a project, copies the item to the project, or duplicates it within the same project. When passed an item, copies the item into the specified item.

Parameters:
• item: Project / Layer / Group / CompoundPath — the item or project to copy the item to

Returns:
• Item — the new copy of the item

Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.

Parameters:
• resolution: Number — the resolution of the raster in dpi — optional, default: 72

Returns:
• Raster — the newly created raster item

Example — Rasterizing an item:

Checks wether the item's geometry contains the given point.

Parameters:
• point: Point — The point to check for.

Example — Click within and outside the star below Create a star shaped path:

Perform a hit test on the item (and its children, if it is a Group or Layer) at the location of the specified point.

The optional options object allows you to control the specifics of the hit test and may contain a combination of the following values:

tolerance: Number - The tolerance of the hit test in points.

options.type: Only hit test again a certain item type: PathItem, Raster, TextItem, etc.

options.fill: Boolean - Hit test the fill of items.

options.stroke: Boolean - Hit test the curves of path items, taking into account stroke width.

options.segment: Boolean - Hit test for segment.point of Path items.

options.handles: Boolean - Hit test for the handles (segment.handleIn / segment.handleOut) of path segments.

options.ends: Boolean - Only hit test for the first or last segment points of open path items.

options.bounds: Boolean - Hit test the corners and side-centers of the bounding rectangle of items (item.bounds).

options.center: Boolean - Hit test the rectangle.center of the bounding rectangle of items (item.bounds).

options.guides: Boolean - Hit test items that have Item#guide set to true.

options.selected: Boolean - Only hit selected items.

Parameters:
• point: Point — The point where the hit test should be performed
• options: Object — optional, default: { fill: true, stroke: true, segments: true, tolerance: 2 }

Returns:
• HitResult — A hit result object that contains more information about what exactly was hit or null if nothing was hit.

Adds the specified item as a child of this item at the end of the its children list. You can use this function for groups, compound paths and layers.

Parameters:
• item: Item — The item to be added as a child

Inserts the specified item as a child of this item at the specified index in its children list. You can use this function for groups, compound paths and layers.

Parameters:
• index: Number
• item: Item — The item to be appended as a child

Adds the specified items as children of this item at the end of the its children list. You can use this function for groups, compound paths and layers.

Parameters:
• items: Array of Item objects — The items to be added as children

Inserts the specified items as children of this item at the specified index in its children list. You can use this function for groups, compound paths and layers.

Parameters:
• index: Number
• items: Array of Item objects — The items to be appended as children

Inserts this item above the specified item.

Parameters:
• item: Item — The item above which it should be inserted

Returns:
• Boolean — true it was inserted, false otherwise

Inserts this item below the specified item.

Parameters:
• item: Item — The item above which it should be inserted

Returns:
• Boolean — true it was inserted, false otherwise

Sends this item to the back of all other items within the same parent.

Brings this item to the front of all other items within the same parent.

Inserts the specified item as a child of this item by appending it to the list of children and moving it above all other children. You can use this function for groups, compound paths and layers.

Parameters:
• item: Item — The item to be appended as a child

Inserts the specified item as a child of this item by appending it to the list of children and moving it below all other children. You can use this function for groups, compound paths and layers.

Parameters:
• item: Item — The item to be appended as a child

Moves this item above the specified item.

Parameters:
• item: Item — The item above which it should be moved

Returns:
• Boolean — true it was moved, false otherwise

Moves the item below the specified item.

Parameters:
• item: Item — the item below which it should be moved

Returns:
• Boolean — true it was moved, false otherwise

Removes the item from the project. If the item has children, they are also removed.

Returns:
• Boolean — true the item was removed, false otherwise

Removes all of the item's children (if any).

Returns:
• Array of Item objects — an array containing the removed items

Removes the children from the specified from index to the to index from the parent's children array.

Parameters:
• from: Number — the beginning index, inclusive
• to: Number — the ending index, exclusive — optional, default: children.length

Returns:
• Array of Item objects — an array containing the removed items

Reverses the order of the item's children

Checks if the item contains any children items.

Returns:
• Boolean — true it has one or more children, false otherwise

Checks if this item is above the specified item in the stacking order of the project.

Parameters:
• item: Item — The item to check against

Returns:
• Boolean — true if it is above the specified item, false otherwise

Checks if the item is below the specified item in the stacking order of the project.

Parameters:
• item: Item — The item to check against

Returns:
• Boolean — true if it is below the specified item, false otherwise

Checks whether the specified item is the parent of the item.

Parameters:
• item: Item — The item to check against

Returns:
• Boolean — true if it is the parent of the item, false otherwise

Checks whether the specified item is a child of the item.

Parameters:
• item: Item — The item to check against

Returns:
• Boolean — true it is a child of the item, false otherwise

Checks if the item is contained within the specified item.

Parameters:
• item: Item — The item to check against

Returns:
• Boolean — true if it is inside the specified item, false otherwise

Checks if the item is an ancestor of the specified item.

Parameters:
• item: Item — the item to check against

Returns:
• Boolean — true if the item is an ancestor of the specified item, false otherwise

Checks whether the item is grouped with the specified item.

Parameters:
• item: Item

Returns:
• Boolean — true if the items are grouped together, false otherwise

Scales the item by the given value from its center point, or optionally from a supplied point.

Parameters:
• scale: Number — the scale factor
• center: Point — optional, default: item.position

Example — Scaling an item from its center point:

Example — Scaling an item from a specific point:

Scales the item by the given values from its center point, or optionally from a supplied point.

Parameters:
• hor: Number — the horizontal scale factor
• ver: Number — the vertical scale factor
• center: Point — optional, default: item.position

Example — Scaling an item horizontally by 300%:

Translates (moves) the item by the given offset point.

Parameters:
• delta: Point — the offset to translate the item by

Rotates the item by a given angle around the given point.

Angles are oriented clockwise and measured in degrees.

Parameters:
• angle: Number — the rotation angle
• center: Point — optional, default: item.position

See also: matrix.rotate

Example — Rotating an item:

Example — Rotating an item around a specific point:

Shears the item by the given value from its center point, or optionally by a supplied point.

Parameters:
• point: Point
• center: Point — optional, default: item.position

See also: matrix.shear

Shears the item by the given values from its center point, or optionally by a supplied point.

Parameters:
• hor: Number — the horizontal shear factor.
• ver: Number — the vertical shear factor.
• center: Point — optional, default: item.position

See also: matrix.shear

Transform the item.

Parameters:
• matrix: Matrix — the matrix by which the item shall be transformed.

Transform the item so that its bounds fit within the specified rectangle, without changing its aspect ratio.

Parameters:
• rectangle: Rectangle
• fill: Boolean — optional, default: false

Example — Fitting an item to the bounding rectangle of another item's bounding rectangle:

Example — Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:

Example — Fitting an item to the bounding rectangle of the view

Attach an event handler to the item.

Parameters:
• type: String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave') — the event type
• function: Function — The function to be called when the event occurs

Example — Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.

Attach one or more event handlers to the item.

Parameters:
• param: Object — An object literal containing one or more of the following properties: mousedown, mouseup, mousedrag, click, doubleclick, mousemove, mouseenter, mouseleave.

Example — Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.

Example — When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set black.

Detach an event handler from the item.

Parameters:
• type: String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave') — the event type
• function: Function — The function to be detached

Detach one or more event handlers to the item.

Parameters:
• param: Object — An object literal containing one or more of the following properties: mousedown, mouseup, mousedrag, click, doubleclick, mousemove, mouseenter, mouseleave

Fire an event on the item.

Parameters:
• type: String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave') — the event type
• event: Object — An object literal containing properties describing the event.

Check if the item has one or more event handlers of the specified type.

Parameters:
• type: String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave') — the event type

Returns:
• Boolean — true if the item has one or more event handlers of the specified type, false otherwise

Removes the item when the events specified in the passed object literal occur.

The object literal can contain the following values:

Remove the item when the next tool.onMouseMove event is fired: object.move = true

Remove the item when the next tool.onMouseDrag event is fired: object.drag = true

Remove the item when the next tool.onMouseDown event is fired: object.down = true

Remove the item when the next tool.onMouseUp event is fired: object.up = true

Parameters:
• object: Object

Example — Click and drag below:

Removes the item when the next tool.onMouseMove event is fired.

Example — Move your mouse below:

Removes the item when the next tool.onMouseDown event is fired.

Example — Click a few times below:

Removes the item when the next tool.onMouseDrag event is fired.

Example — Click and drag below:

Removes the item when the next tool.onMouseUp event is fired.

Example — Click a few times below:

Exports the item and all its child items as an SVG DOM, all contained in one top level SVG group node.

Returns:
• SVGSVGElement — the item converted to an SVG node

Converts the passed node node into a Paper.js item and adds it to the children of this item.

Parameters:
• node: SVGSVGElement — the SVG DOM node to convert

Returns:
• Item — the converted Paper.js item