how do I merge paper.js items into a raster image?

Question

I am using paper.js to create an application in which I can markup an image then save it.

My lowest layer of my paper project is a raster of the image. The next layer up is where vector graphic markup is done using various paper.js items. When an item is committed I copy it to the lower (raster) layer where it is preserved. But it is just a child item of the layer, not part of the rasterized image. If I capture the raster as an image with toDataURL the child items are not part of the image (I wouldn't expect them to be).

How do I insert/overlay part of the rasterized image with an paper.js item? I can rasterize the item first, but then I need to know how to merge the two rasters with one overlaying part of the other? If I convert to a raster first then pixels that are not in the actual paperjs item but are in the enclosing rectangle will need to be transparent, i.e., not overlay the rasterized image.

Answer 1

You can create a raster object from the whole layer, then convert that to a DataURL string:

var tempImg = project.layers[0].rasterize();
var dataString = tempImg.toDataURL();
tempImg.remove();