title: 'Tainted canvases may not be exported' when using drawImage
body: <p>When trying to draw an image onto a canvas, and then saving the canvas to an image, I get the following error:</p>
  
  <blockquote>
    <p>Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var picture = new Image();
  picture.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png";
  var canvas = document.getElementById("background");
  var context = canvas.getContext("2d");
  function generate(){
   var ctx = document.createElement("canvas").getContext("2d");
    ctx.canvas.width = canvas.width;
    ctx.canvas.height = canvas.height;
   ctx.fillStyle = "red"; 
   ctx.rect (0, 0, 40, 40);
   ctx.fill();
  
   ctx.drawImage(picture,0,0);
   
   image = new Image();
   image.setAttribute('crossOrigin', 'anonymous');
   image.src = ctx.canvas.toDataURL("image/png");  
  }
  function draw(){
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(image, 0,0,100,100,0,0,100,100); 
  }
  function play(){
    generate();
    setInterval(function(){draw();}, 0.0333);
  }
  
  window.onload = function(){
   if(picture.complete)play();
   else picture.onload = play; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="background" width=500 height=500&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know it's to do with drawing the image on the canvas because when that line is removed everything's okay and you can see the red box:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var picture = new Image();
  picture.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png";
  var canvas = document.getElementById("background");
  var context = canvas.getContext("2d");
  function generate(){
   var ctx = document.createElement("canvas").getContext("2d");
    ctx.canvas.width = canvas.width;
    ctx.canvas.height = canvas.height;
   ctx.fillStyle = "red"; 
   ctx.rect (0, 0, 40, 40);
   ctx.fill();
   
   image = new Image();
   image.setAttribute('crossOrigin', 'anonymous');
   image.src = ctx.canvas.toDataURL("image/png");  
  }
  function draw(){
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(image, 0,0,100,100,0,0,100,100); 
  }
  function play(){
    generate();
    setInterval(function(){draw();}, 0.0333);
  }
  
  window.onload = function(){
   if(picture.complete)play();
   else picture.onload = play; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="background" width=500 height=500&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  
  So it's drawImage that causes this to fail.</p>
  
  <p>I've read other questions and the solutions were "just add <code>image.setAttribute('crossOrigin', 'anonymous');</code>" (which I've done) or to put them in the same directory (I tried this by placing both files on desktop) but neither seemed to solve it for me.</p>
  
  <p>Is there a fix or an alternative method? All I want to do is draw multiple images onto one image. (The red box was just for show.)</p>