Javascript 如何使用画布修改图像

在我的html中，我已经加载了一个图像：

<img usemap="#prototypeMap" src="../../projects/tcas/TCAS display.jpg" style="z-index: 2;">

最后一行告诉我这个错误：

---

TypeError:无法将值转换为以下任意值：HTMLImageElement、HtmlCanvaElement、HTMLVideoElement。

您可以尝试使用SVG图像标记：

---

然后使用其他SVG元素在顶部绘制。

重复此问题似乎与主题无关，因为您在提问之前似乎没有自己做过研究。我做过研究，我还在做。

var imgElement = document.getElementById('prototypeMap');

var canvas = document.createElement("canvas");
canvas.width = imgElement.offsetWidth;
canvas.height = imgElement.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(imgElement,0,0); //ERROR