Working with Items

Before we start, let's define what we mean when we talk about items. An item is anything that can appear within in your Paper.js project: layers, paths, compound-paths, groups, text items, rasters etc.

Every kind of item has specific behaviours: a path contains points, a layer can be active, groups and compound paths have children.

But since they are all items, they also share a number of behaviours. All these shared behaviours can be found in the Item reference.

Creating New Items

When you create new items, they are automatically added to the end of the item.children list of the project.activeLayer.

In the next example, we create a path and then set its fill color by accessing it through the item.lastChild property of the project.activeLayer:

Source

Hiding Items

When you set item.visible to false, the item will be hidden and won't be drawn.

For example let's create a path and hide it. When you execute the following code, you won't see the item:

Source

Duplicating Items

To make a copy of an item, you call its item.clone() function. The item.clone() function returns the cloned item, so we need to store it in a variable if we want to do something with the copy.

The following example create a circle shaped path, clones it and then changes a couple of properties of the clone.

Source

Selecting Items

When you select items or path segment points & handles in your code, Paper.js draws the visual outlines of them on top of your project. This is very 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:

Source

Blend Mode & Opacity

To make an item transparent, set its item.opacity property to a value between 0 and 1:

Source

To change the blend mode of an item we pass a string to its item.blendMode property:

Source

Visit the item.blendMode reference to see the different supported blend modes.