How to export an image or PDF from a Processing Javascript mode sketch?

Question

Processing 2 'Java mode', previously known as 'standard mode', has some easy options to output graphics like saveFrame() or the PDF Export Library.

Now, the web friendly 'Javascript mode' (based on the Processing.js project) allows one to host a sketch easily (by way of HTML canvas), but I can't find much about file output when using it.

How can I make my 'Javascript mode' sketch save SVG or PDF?

(Unfortunatly I don't know Javascript, so the answer might not assume knowledge of it)

Answer 1

The javascript mode of Processing utilizes HTML5 Canvas by default for rendering. You can use the HTML5 toDataURL method of canvas in order to export a PNG.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

In fact, that is what save() and saveFrame() do in Processing.js. If you look throug the reference in Processing.js you'll notice that the functions you would use to export PDF in Processing are unavailable (indicated by red).

Exporting to PDF from canvas does not seem possible. However, there are a few frameworks that export canvas to SVG. It has been asked here before as well.

Here is an extensive study for going from SVG to canvas and back again. Towards the bottom there is an excellent roundup of toolkits you can use. However, mixing these in with Processing.js is non-trivial.

If you don't know Javascript well and you need to export to PDF or SVG in Javascript and not Java then I would suggest one of these other toolkits. Here is a great page that shows the basics of getting started on Processing.js vs Paper.js vs Raphael. You'll notice that is isn't too different, if you know Processing then you should be ok.

Processing.js can also render to WebGL but that doesn't have either an SVG or PDF export option natively or through any toolkit that I know of.