title: Blank png when canvas is saved toDataURL
body: <p>I am saving my canvas as an url base64 with the function toDataURL. However I get a full blank image when I want to use it after. I think it is a problem of saving the canvas when it is not fully loaded or something...</p>
  
  <p>Here is my fiddle, I would like to be sure that my variable dataURL is the image represented in the canvas2</p>
  
  <p>fiddle : <a href="http://jsfiddle.net/acbo6m6o/8/" rel="nofollow noreferrer">http://jsfiddle.net/acbo6m6o/8/</a></p>
  
  <pre><code>var ctx = document.getElementById('canvas').getContext("2d");
  var ctx2 = document.getElementById('canvas2').getContext("2d");
  var img = new Image();
  img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&amp;oe=5941AAB6";
  var img2 = new Image();
  img2.src = "https://icc-static-files.s3.amazonaws.com/ICC/photo/2017/01/31/f3a228a9-30ca-453e-99c5-ee6150c714a5/Facebook_Logo.png";
  img.addEventListener('load', function(e) {
      ctx.arc(150, 150, 150, 0, Math.PI * 2, true);
      ctx.save();
      ctx.clip();
      ctx.drawImage(this, 0, 0, 300, 300);
      ctx.restore();
      ctx2.drawImage(ctx.canvas, 35, 60, 230, 230);
      ctx2.drawImage(img2, 200, 60, 75, 75);
  }, true);
  
  var dataURL = canvas2.toDataURL();
  </code></pre>
  
  <p>When I put the toDataURL in addeventListener I got undefined variable.</p>