Can't create PNG image from Canvas

[samueller]

I'm trying to use FileSaver.js to create a PNG download from a Canvas. Works great when working directly with the canvas from JavaScript. However, with paper.js, for some reason it works with the canvas differently and I get blank images.

Has anybody been able to create a PNG image from a paper.js canvas?

Seemingly related but not important to me, if I draw directly on a paper.js canvas with JavaScript, I don't see any of those graphics. However, if I then save them with FileSaver.js, I see only the directly drawn graphics.

[Benny-]

I have been able to export a PNG from paper.js canvas just fine. You can find my code here.

This should work for you (please note you should have the libraries mentioned here):

paper.view.draw();
paper.view.element.toBlob(function(blob) { saveAs(blob, "image.png");});

Could you provide the paperjs version you are using and a small example if the above code does not work?

[samueller]

I think I have this all figured out now, thanks Benny! So the reason why I was getting blank images was that I was calling paper.view.draw() after the toBlob() call. And the reason why the direct Canvas drawing wasn't showing up on screen is that I called paper.view.draw() after those and apparently paper.js overwrites the Canvas (makes sense, just realizing that now).

So now everything works and Retina even works really well it seems with the latest paper.js that was just released!

[LokeshLalwani]

Hello Samueller, Could you show me your code for converting html canvas to a png image using FileSaver.js