Question

How do I convert an image or datauri to canvas? I see the other way at http://www.nihilogic.dk/labs/canvas2image/, but I also want to find out how I can create a canvas at the first place.

The reason I ask this question is because I would like to create a little app that lets user create a canvas ‘image’, save it as something and be able to reopen it for canvas modification in the future. I figured that datauri is a good way to save a canvas, but I am not sure how I can do to reopen the datauri and use canvas to modify the drawing.

Thanks!

Answer 1

Create an image element using the data URI data as the source and then use drawImage to draw it to the canvas:

var ctx = document.getElementById('ctx').getContext('2d');
var img = new Image();
img.src = uriData;
img.onload = function () {
    ctx.drawImage(img,0,0);
}

Updated: to clarify that ctx is a 2D context, not a canvas object.