paperjs.org | static pages in https | Continous Integration library

I'm attempting to use paper.js with javascript directly: http://paperjs.org/tutorials/getting-started/using-javascript-directly/

and cannot get gradients to work. Instead of a color gradient the line just appears to be black. This occurs for all shapes, so I'm pretty sure I'm somehow setting up paper.js incorrectly. Any help would be appreciated!

Here's an example codeblock:

In jQuery, I can attach an event to all elements like a paragraph, using $("p"). Does something similar exist for Paper.js. I tried using project.activeLayer.children.onMouseEnter but that did not work.

I was thinking about looping over all the children inside the onFrame function but that seems wrong. It will probably attach multiple event listeners to the same item. So, all items will have many event listeners attached to them but I am not sure.

What is the best way to attach event listeners to all current and future items in a project layer in Paper.js?

Link: http://paperjs.org/reference/item/#onmouseenter

With 3 points, I am trying to achieve: rotate, move and resize after grouping them to any Path. Path can be any regular polygon shape.

So far it is rotating and moving well smoothly. However it fails on resizing.

Here is the sketch.

Can someone guide or correct?

Note: the sketch was updated to move when shape is also dragged.

Checking the previous solution from a touch screen device (my mobile phone), I noticed the impossibility to select a PaperJS item by using onMouseMove event and so set the item as value for the selectedPath variable. Other problem, for a mobile device, is the difficulty to press the d key on the keyboard to delete the selectedPath...

So I thought to use the onDoubleClick event on an added item to remove it, like in this sketch where you can draw an arrow by dragging and make it yellow with a single click or remove it with a double click on it (you can also remove the rectangle with a double click on it), but can't achieve the same in this other sketch (similar to the previous question), to remove a smooth item (drawn dragging on canvas) on double click.

Thank you for your help

First steps with PaperJS. I realized this sketch and this video to describe the issue. As you can see in the video, drawing, for example, three items, and moving over them to select one and pressing the "d" key on keybord, it is possible to remove just the last added and selected item, but not the previous ones. If you start from the first or second item of the three added, the alert is not even triggered.

The wanted beaviour would be instead to select the event.item.selected (moving on it with the mouse) and remove just the selected one by clicking the "d" key on keyboard.

Thank you for your help

I need to get the svg element from a react-icon component to render the image using a different Javascript library.

I'm using paperjs as the drawing engine for this demo I'm working on, for the UI I use react-icons and react-bootstrap. Now paperjs allows to importSVG images, so I try the following:

I'm trying to read a file from STDIN, process it with paper.js and return the results.

To get there I first tried to do it by reading in a file from the fs like this:

I'm trying to understand how to use setpixel method that exists in the PaperJS code and its documentation but doesn't work.

Here is the Sketch example.

In PaperJS is it possible to fill a raster with a color without iterating over each pixel?

So say you have a PNG with some transparency, the pixels with no transparency will have a different color.

AFAIK you can iterate over each pixel http://paperjs.org/tutorials/images/using-pixel-colors/ and do it manually (creating an alternate pixel for each image pixel), but ideally there is a solution that doesn't require doing this pixel by pixel.

It would be nice to use the raster as a clipping mask to show the color beneath it but I believe that only works with paths.

Grateful for any help