title: Download canvas with image is empty image
body: <p>I am working on the following demo. Why can I not download the image which is drawn inside the Canvas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  
  var img = new Image();
  img.onload = function() {
     context.drawImage(img, 10, 0);
  };
  img.src = 'https://www.realmadrid.com/img/horizontal_940px/fotomontaje1_20180910050532.jpg';
  $("#download").on("click", function(el){
    $('#download').attr('download', "TEasasazzzzSTIMG.jpg");
    setTimeout(function(){ 
    var image = canvas.toDataURL("image/jpg");
    el.href = image;
    }, 3000);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;a id="download"  href=""&gt;Download&lt;/a&gt;
          &lt;p&gt; &lt;/p&gt;
          &lt;canvas id="canvas" width=800 height=400&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>