Can you convert an SVG to Raster?

[Richard JE Cooke]

I make my background from two million Path.Circles of one pixel each.

Is there a way to convert this to a Raster so drawing it to the screen is instant, rather than drawing all two million SVGs into the DOM?

[Richard JE Cooke]

Alternatively is there a way of drawing to the underlying canvas directly through Paper.js?

[asensi...@gmail.com]

What Paper.js is doing in reality is using the Canvas API to draw your shapes into a canvas element.

The only thing is that it keeps your shapes in memory in case you want to update them in the future.

If you update them, Paper.js then redraws the scene into the underlying canvas.

In your case, I see 2 main possible solutions:

- still use Paper.js to help you draw things but make sure that you somehow only keep the final drawing and clear the memory (there are several possible ways to do this)

- directly use the Canvas API, which will always be more performant since you'll remove the Paper.js layer on top of it

[Richard JE Cooke]

Thank you, yes, I  have been considering drawing things in p5.js for speed, but doing all my calculations in paper.js (or maybe using flatten.js or geometry.js).

But I finally saw today that Paper PathItem objects have the  rasterize([options]) that I'm going to try.

[Richard JE Cooke]

For anyone else wanting to improve paper.js performance, I can now confirm that

path.rasterize({resolution: 300});

path.remove();

works very well. It keeps RAM usage low enough that Chrome won't crash from out of memory error, despite my having millions of line segments of different colours.

However, I'm now not sure how to export my drawing because it isn't svg anymore, so I assume

console.log(p.project.exportSVG({asString: true}));

won't work. Yet to try...

[Sean Johnson]

If in browser, you could always just right click, save image  to disk...?

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/01eb3cb9-d101-4518-883e-e4ebd2cd5063n%40googlegroups.com.

[asensi...@gmail.com]

It is indeed one of the most efficient performance optimization in such cases.

About the export, you still can export your drawing but most of it will no longer be vector based but pixelated.

So you can either:

- still export it as svg but the svg will contain an image

- directly export the canvas content as image

[Juro Dobrik]

You can get pixels from canvas. 

To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/bbd3f5c5-f1e0-41fc-b1c3-1ad1d8fb24f3n%40googlegroups.com.