Javascript 绘制图像后获取画布数据时出现问题

此代码在以下情况下运行良好：

 <script type="text/javascript">

var canvas = document.createElement("canvas");
    canvas.id = "myCanvas";
    canvas.style.height = "640px";
    canvas.style.width = "384px";
    canvas.style.position = "absolute";
    canvas.style.border = "1px solid black";

    document.body.appendChild(canvas);
var context = canvas.getContext('2d');


function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

 canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    var imgd = context.getImageData(mousePos.x, mousePos.y, 1, 1);
    var pix = imgd.data;

    document.getElementById("listener").innerHTML = "<b><i>" + message + "<br>" + pix[3] + "</i></b>";
  }, false);
</script>

<div id="listener" >
</div>

不会有任何事情发生。。。 我做错了什么？错在哪里？ 我想在画布上画一些图像，然后得到像素数据（包括鼠标位置和像素的alpha值）。。。

---

我怎样才能意识到这一点？

如果要在加载图像之前在画布上绘制图像，则需要在加载时绘制图像：

var img = new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
}
img.src = 'http://www.animefighters.de/images/armor_leatherbelly.png';

---

谢谢你的回答，至少图像已加载。。。但现在，又出现了另一个问题：当我悬停画布对象时，既没有提到鼠标的位置，也没有提到alpha值。。。你有什么建议吗？我需要看看代码才能更好地理解这个问题。无论如何，如果这个问题解决了，你应该接受它，并为你的其他问题发布另一个问题。（然后，您可以在评论中发布新问题的链接）

var img = new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
}
img.src = 'http://www.animefighters.de/images/armor_leatherbelly.png';