Javascript 将图像添加到画布对象不会'；不能正确显示

我试图将图像添加到画布对象中，但就我而言，我不知道如何使其正确显示。它显示画布对象（一个圆），但不显示图像

这是我的画布HTML：

  <canvas id="leaf" width="60" height="60" style="border:1px solid #d3d3d3;"></canvas>

以下是相关的JS：

let canvas = <HTMLCanvasElement>document.getElementById('leaf');
let context = canvas.getContext('2d');

let imageObj = new Image();
imageObj.onload = function()
{
  context.save();
  context.beginPath();
  context.arc(30, 30, 28, 0, 2 * Math.PI);
  context.clip();
  context.drawImage(imageObj, 0, 0);
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

context.restore();
context.beginPath();
context.arc(30, 30, 28, 0, 2 * Math.PI);
context.drawImage(imageObj, 0, 0);
context.strokeStyle = 'red';
context.stroke();

console.log(canvas.toDataURL());

return canvas.toDataURL();

let canvas=document.getElementById（'leaf'）；
让context=canvas.getContext（'2d'）；
设imageObj=新图像（）；
imageObj.onload=函数（）
{
context.save（）；
context.beginPath（）；
弧（30,30,28,0,2*Math.PI）；
clip（）；
drawImage（imageObj，0,0）；
};
imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
restore（）；
context.beginPath（）；
弧（30,30,28,0,2*Math.PI）；
drawImage（imageObj，0,0）；
context.strokeStyle='red'；
stroke（）；
log（canvas.toDataURL（））；
返回canvas.toDataURL（）；

但它不是显示圆圈内的图像，而是显示圆圈，没有图像。。。

---

我发现这是由于

返回canvas.toDataURL（）被抢占调用，所以我将其移动到image.load（）函数中，现在它可以正常显示了
 通过使用canvas.toDataURL（）

删除

和两行，我以错误的纵横比获得了要显示的图像。希望这有帮助。通过删除，我得到的错误是“getContext”在HtmleElement上不存在。我还需要canvas.toDataURL（）来导出要在google地图上使用的画布。