Why does canvas.toDataURL() throw a security exception?

Question

did i not get enough sleep or what?? This throws Error: SECURITY_ERR: DOM Exception 18 and here's my js code... There's no way this shouldn't work!!!

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;
var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
 //draw image
 ctx.drawImage(img, 0, 0)

 //here's where the error happens:

 window.open(frame.toDataURL("image/png"));
}

can anyone explain this, please?

Answer 1

You can't put spaces in your ID

Update

My guess is that image is on a different server than where you're executing the script. I was able to duplicate your error when running it on my own page, but it worked fine the moment I used an image hosted on the same domain. So it's security related - put the image on your site. Anyone know why this is the case?

Answer 2

In the specs it says:

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

If the image is coming from another server I don't think you can use toDataURL()