Javascript html5画布img落后于其他绘制对象

我正在创建一个html5画布游戏，其主要思想是在每一个动画中都有一个循环，在每一帧中重新绘制画布上的所有内容。 由于某些原因，绘制的对象没有按我希望的顺序显示。我希望首先显示背景图像，然后是一个矩形，最后是一个相互重叠的图像。但是，矩形会挡住第二个图像的视图，而不是相反方向

我的相关代码：

function playerdraw(p){ 
ctx.rect(p.x,p.y,100,150);
ctx.stroke();
//irrelevant stuff here...
ctx.drawImage(p.im,p.x,p.y+25,100,100);
}

我在window.onload上运行整个程序，所以图像加载应该不会有问题。 为什么会发生这种情况？

（由于您没有提供足够的代码，我认为这可能是问题所在。）

每次运行

playerdraw（）

函数时（如果每次都清除整个画布），都需要重新绘制背景图像。因此，以下代码应该可以工作：

function playerdraw(p) {
    // clear entire canvas
    ctx.clearRect(...);
    // draw background image
    ctx.drawImage(...);
    // draw rectangle
    ctx.rect(p.x, p.y, 100, 150);
    ctx.stroke();
    // irrelevant stuff here...
    // draw other image
    ctx.drawImage(p.im, p.x, p.y + 25, 100, 100);
}

---

注意：您需要在一开始就清除整个画布（如果您这样做的话）。还有一种可能性是，你正在做一些画布翻译或缩放的事情，如果按错误的顺序进行，事情会变得非常混乱

我现在知道我的问题是什么了。我忘了加上

 ctx.beginPath();

在我的代码中。我一次又一次地调用我的函数，它画出了比我想画的更多的矩形。我觉得很傻