title: Security Error with canvas.toDataURL() and drawImage()
body: <pre><code>&lt;!doctype html&gt;
  &lt;canvas id="canvas" height="200" width="200"&gt;&lt;/canvas&gt;
  &lt;div id="new"&gt;&lt;/div&gt;
  &lt;script&gt;
  var div = document.getElementById("new");
  var canvas = document.getElementById("canvas");  
  var ctx = canvas.getContext("2d");  
  var img = new Image();
  
  img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';
  //img.src = 'local.png';
  
  img.onload = function(){
      //draws the image on the canvas (works)
      ctx.drawImage(img,0,0,200,200);
  
      //creates an image from the canvas (works only for local.png)
      var sourceStr = canvas.toDataURL();
  
      //creates the img-tag and adds it to the div-container
      var newImage = document.createElement("img");
      newImage.src = sourceStr;
      div.appendChild(newImage);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This script creates a canvas with the html5-logo. From this canvas I want to create an image, using the "toDataURL()"-method. Here I get a security error.</p>
  
  <p>Firefox says - Error: uncaught exception: [Exception... "Security error"  code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"</p>
  
  <p>Chrome says - Uncaught Error: SECURITY_ERR: DOM Exception 18</p>
  
  <p>If I use the script with an image on the server it works fine. So it think this time it is really a feature and not a bug.
  Does anyone has an idea how I can create an image using canvas with out of an image form an other server?
  BTW: the error occurs if you run the site as a local file without a webserver.</p>