Question

I have a canvas where the user make interactions, then a <img> for the final “product”. The <img> tag has the style properly filled with the data URI of the first canvas.

I now need to fetch this “canvas” as a element then transform it into a canvas object. Example:

var canvas = parent.document.getElementById('canvas_holder');
var context = canvas.getContext("2d");
context.strokeStyle = '#f00';
//etc... 

*canvas_holder* is the <img> tag with style set to real canvas data URI. How would I go to make this thinking work? I can not change the structure of the <img>, unfortunately.

Appreciate any help!

Answer 1

I think the OP wants to tell us that the image is a combination of a foreground image transparent.png and a background image which is represented by its base64 encoded version. The only way I see is to grab the background image from

var image = new Image();
image.src = $('#canvas_holder').css('background-image').match(/url\("?'?(.*)"?'?\)/)[1];
//  If you don't want to use jQuery, you could get the background-image as
// image.src = document.getElementById('canvas_holder').style.backgroundImage.match(/url\("?'?(.*)"?'?\)/)[1];

and paste it onto the canvas.

var canvas = document.getElementById('yourcanvasid');
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);

and then get the foreground image and paste it onto the same canvas

var foreGround = document.getElementById('canvas_holder');
ctx.drawImage(foreGround, 0, 0);