为什么它出现在画布后面而不是画在画布上？

Question

我正在使用HTML5和canvas进行动态网络地图。

我以PNG格式加载了地图，但每当我尝试绘制它时，它会像这样在地图后面绘制：

我需要它来绘制 白色方块。

这是我的代码：

window.onload = function() {
  var canvas = document.getElementById('canvas1');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  }
  img.src = "img/plano.png"; //transparent png
  ctx.fillRect(1039, 150, 50, 50);
}

提前致谢！

Answer 1

fillRect需要在图像加载后发生。图像以异步方式加载，因此唯一安全的地方就是在drawImage ...

之后

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    ctx.fillRect(200,200,50,50);  // Draw rect after image
}