下载带有图像的画布为空图像

Question

我正在研究以下演示。为什么我不能下载在画布内绘制的图像？

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);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <a id="download"  href="">Download</a>
        <p> </p>
        <canvas id="canvas" width=800 height=400></canvas>

Answer 1

将el.href = image;更改为window.location.href = image;