So far i have this code for add a little watermark to a image and drawimage it to a canvas, now i'm trying to get that canvas data to DataURL, for some reason it's not working as it supposed to be
could anyone give me a idea why ? and maybe how to fix it and get URI data of it
here's my code
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
var watermark = new Image();
watermark.src = "http://dummyimage.com/80x80/red/ffffff";
var img = new Image();
img.src = "http://dummyimage.com/500x700/303030/ffffff";
context.drawImage(img, 0, 0);
<canvas width="500" height="700" id="canvas1"></canvas>
context.toDataURL('image/png');, but it doesn't return
Here's a link to my bin
toDataURL method exists on the canvas and not the context.
The next error that you'll get after fixing that is:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
The image must exist on the same domain to fix that.
You may also have to preload the images.