title: Img.onload not firing when dynamically setting src to dataURI
body: <p>I am having trouble getting the onLoad handler to fire when the src of imgGraph is loaded with a generated dataURI. The dataURI is generated from a d3.js visualization (svg) using canvas.</p>
  
  <pre><code>var canvas = document.getElementById(visual + '-canvas');
  if(visual == "graph"){
       console.log('graph logic n stuff')
       canvas.width = 558;
       canvas.height = 558;
       var graph = d3.select('#graph-svg').node();
       var svg_xml = (new XMLSerializer()).serializeToString(graph);
       var imgGraph = new Image();
       var context = canvas.getContext('2d');
       var imageData;
       imgGraph.onload = function(){
           console.log('img loaded')
           context.drawImage(imgGraph, 0, 0);
           imageData = getImgData(canvas);
           console.log(imageData)
           def.resolve(imageData)
       }
       console.log('setting src')
       imgGraph.src = "data:image/svg+xml;base64,"+btoa(svg_xml);
  }
  </code></pre>
  
  <p>The img src is being set, but the img.onload is never fired.
  When logging and surfing to the datauri, the image is being displayed however.
  Other images seem to fire the onload event correctly.</p>
  
  <p><a href="https://pastebin.com/yV3VyvGy" rel="nofollow noreferrer">DataURI - PasteBin</a></p>