Javascript 用画布绘制图像

我有一个关于画布的问题，这是我画东西的代码：

   .....
   <script>

  function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 0;
    var y = 0;

    context.drawImage(imageObj, 0, 0);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2] + 0.18 * data[i + 3];

      data[i] = brightness;

      data[i + 1] = brightness;

      data[i + 2] = brightness;

      data[i + 3] = brightness;
    }


    context.putImageData(imageData, 0, 0);
  }

  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'lena.jpg';
  </script>
.....

这是我的代码的一部分，是JavaScript中的画布，它指示图像为灰度，在浏览器中显示图像效果很好，请注意最后一个命令是从源图像加载图像obj.src='lena.jpg'；，但是，当我把这个命令放在脚本的第一行时，浏览器没有显示任何内容，我不知道为什么它必须在脚本的末尾，请建议，谢谢

var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'lena.jpg';

第一条线在哪里

脚本基本上有5行，从这里开始

放在第一行上看起来是这样的：

但当时并没有创建图像

这也应该起作用：

var imageObj = new Image();
imageObj.src = 'lena.jpg';
  imageObj.onload = function() {
    drawImage(this);
  };

---

必须在源代码之前定义onload函数。否则，可能会加载图像，甚至没有定义onload函数。因此imageObj.src='lena.jpg'；必须至少在imageObj.onload之后

---

但是你可以在drawimage函数之前移动整个块。这应该很好

您好，谢谢您的回复，我的意思是当我把imageObj.src='lena.jpg'；上述函数DrawImageObj{…，那么它将不会在浏览器中显示图像，但是如果我最后像我问题中的代码一样输入，它会正确显示，不确定为什么。谢谢你的评论，那么在加载图像之前必须定义onload函数的原因是什么？对不起，我不理解这个问题…你能重新措辞吗？

imageObj.src = 'lena.jpg';
var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };

var imageObj = new Image();
imageObj.src = 'lena.jpg';
  imageObj.onload = function() {
    drawImage(this);
  };