将画布保存为图像文件，但画布包含图像

Question

问题： 我想下载一个sum(2)作为图像文件（jpg / png）。
除非我不使用canvas，否则这将有效
在我下载之前将图像放在drawImage上。

问题： 我可以下载图像并右键单击＆＃34;另存为＆＃34;，
但是有没有办法用canvas或button？

下载它

（我的想法是一个画布，人们可以在画布上绘制并保存它们。）

小提琴没有图片（dl有效）：https://jsfiddle.net/Lawgqfwo/
小提琴与图像（dl不起作用）：https://jsfiddle.net/o5m4m8xp/

＆＃13;

＆＃13;

link

＆＃13;

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");


// var img = new Image();
// img.src = "http://www.w3schools.com/tags/img_the_scream.jpg";
// ctx.drawImage(img, 10, 10);


// download button
var button = document.getElementById('btn-download');

button.addEventListener('click', function(e) {
  var dataURL = canvas.toDataURL('image/png');
  button.href = dataURL;
});

＆＃13;

#canvas {
  background-color: lightgrey;
}

＆＃13;

＆＃13;

＆＃13;