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

【问题标题】：Why is this appearing behind the canvas instead of drawing over it?为什么它出现在画布后面而不是在画布上绘制？
【发布时间】：2018-01-17 23:27:04
【问题描述】：

我正在使用 HTML5 和画布制作动态网络地图。

我以 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);
}

提前致谢！

【问题讨论】：

加载是异步的
那么，我需要在 onload 上加载图像并创建一个事件来绘制形状？
是的，把绘制形状的代码移到图片的onload函数底部
我已经把它移到了文件的末尾，但它仍然把形状放在图片后面，这里是一个小提琴：[fiddle]jsfiddle.net/46ufvobr，但我实际上认为我是这样做是错误的，在此先感谢您的帮助并感谢@dougtesting.net 的回答
嗨@JoseSanchezGarcia，不是文件结尾，fillRect需要在drawImage之后发生

标签： javascript html canvas png

【解决方案1】：

fillRect 需要在图像加载后发生。图像是异步加载的，因此发生这种情况的唯一安全位置是在 drawImage 之后...

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

【讨论】：