Javascript 未捕获类型错误：无法读取属性'；getContext'；在zoom.html处为空：8

我试图创建一个图像缩放，如果你将鼠标悬停在图像上，让它按定义的宽度缩放图像。沿着这条路线我得到了

Uncaught TypeError: Cannot read property 'getContext' of null
    at zoom.html:8

在我的html文件中。这是我面临挑战的html文件的一个片段

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    iw, ih;

在html文件的主体中，我有这个代码段

<canvas width="310" height="305" id="canvas">Sorry, no canvas available</canvas>
<a id="download" download="download.jpg">Download as image</a>

---

请问有什么问题？

您试图在加载DOM中的元素之前访问该元素。比较这两个例子：

log（document.getElementById（'canvas'）；

Ok很酷。我是否可以引用body标签img.src=“”）中使用的相同图像@您已经在

img

上设置了

onload

事件侦听器。这就是处理图像所需要做的。

http://plnkr.co/edit/0G93qmVeUWby0SRIp5Br