在这幅画布上绘制图像时,我缺少了什么?

这是我的完整代码:

<canvas width="1366" height="768"></canvas>
<script> 
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;

for (var i = 0; i < data.length; i += 4) {
      data[i]     = 0;
      data[i + 1] = 0;
      data[i + 2] = 0;
    }
ctx.putImageData(imageData, 0, 0);
</script>

即使我已将每个单独颜色通道的值设置为0,画布仍保持白色,好像没有任何变化。

这是网页上唯一的代码,开发者控制台中没有错误。