Question

Hay guys, i’ve made a simple drawing application using the canvas tag. However i would like to export the data to JSON so it can be saved.

How does one go about this?

Answer 1

What you need is the toDataUrl(type) method. It will return a data: URI – a plain string which you can easily put in a JSON structure or do what you want with. Example:

var canvas = document.createElement('canvas');
canvas.width=8;
canvas.height=8;
var ctx = canvas.getContext('2d');
/* draw on ctx */
alert(canvas.toDataURL());
/* result: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAADUlEQVR42mNgGAUgAAABCAABXbcZDQAAAABJRU5ErkJggg== */

Tested in Opera 10.0. You can also try .toDataURL(“image/jpeg”)