canvas.drawImage .toDataURL

Question

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

JS

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);
context.drawImage(watermark,0,0,50,50);

HTML

<canvas width="500" height="700" id="canvas1"></canvas>

tried with context.toDataURL('image/png'); , but it doesn't return

Here's a link to my bin

Answer 1

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.