Javascript 始终在另一个形状的顶部显示画布形状

我的画布上有两个移动的矩形，一个是绿色的，一个是红色的。当它们位于同一位置，并且您只能看到其中一个时，始终显示红色矩形，而绿色矩形仅位于红色矩形下方

---

我怎样才能做到绿色的总是显示在顶部？

我认为你应该在红色的后面画绿色的。所以如果你的矩形在一个数组中，你可以按相反的顺序迭代它

（函数开始（）{
const canvas=document.getElementById（'canvas'）；
canvas.width=window.innerWidth | |$（window.width（）；
canvas.height=window.innerHeight | |$（window.height（）；
const ctx=canvas.getContext（'2d'）；
const draw=function（opts={color:'yellow'，x:0，y:0}）{
ctx.beginPath（）；
ctx.rect（选项x，选项y，150100）；
ctx.fillStyle=opts.color；
ctx.fill（）；
}
//第1栏
绘制（{颜色：红色，x:20，y:20}）；
绘制（{颜色：绿色，x:40，y:40}）；
//第2栏
绘制（{颜色：绿色，x:200，y:20}）；
绘制（{颜色：红色，x:220，y:40}）；
})();
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
背景：#000；
}
帆布{
位置：绝对位置；
左：0；
排名：0；
z指数：0；
}

没有任何代码很难说，但是如果您先有绿色矩形的代码，它将首先被绘制，红色将被绘制在它的顶部。
谢谢，现在似乎合乎逻辑：）