Javascript 在图像上画一条线

我试图在加载图像后画一条线。 这条线是手动绘制的。 一旦我试图上传一张图片并在上面画些东西，它就会停止工作。 有人能告诉我如何重叠图像的id和绘图框的id吗

单击以查看图形的演示

<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
<div id="coord"></div>

---

非常感谢。

只需将画布放在div中，然后更改div的背景图像即可

<div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/12/Mouse_line_drawing.jpg');width:auto;height:auto;display:inline-block;">
    <canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
</div>
<div id="coord"></div>

只需将画布放在另一个div中，并使用图像作为div的背景一个小问题，如果我想在视频上画画，这行吗？不太确定，因为视频会有控件和暂停按钮。然后你也会有问题，因为你不能有一个视频作为背景图像，但你可以随时尝试