Given a loaded png image as a template, I want to enable a user to trace elements of the image. In p5, this is easy:
setup() {
// Load image
var img = loadImage('...');
image(img, 0, 0);
}
draw() {
ellipse(mouseX, mouseY, 2, 2);
}
However, I want to then be able to save only the ellipses (without the underlying image). Is there a way to write to an Image
instead of directly down to the canvas, so that I can lift the pixels of the trace without taking the original image with it?
My current plans are one of:
- Overlay a second p5 instance, and draw on a transparent canvas overlaid on the image... But this seems harder to maintain, and may suffer from the DOM being out of perfect alignment
- Instead of using
ellipse
, write to acreateImage
-generated pixel array... But this seems slow and unpleasant.
Caveat: The image is a p5.Image
, so overlaying on top of a <img>
won't be enough.
You can use the
createGraphics()
function to create an instance ofp5.Renderer
. You can then draw to thep5.Renderer
and then overlay it on top of the image. Then you can access the pixel array of thep5.Renderer
to get just the overlay, not the image.Here is an example:
More info can be found in the reference.
By the way there is a p5.js tag.