Javascript 在循环中更改Rect html画布的颜色

我想创建一个显示排序算法步骤的程序，如下所示：

现在，我不知道如何改变我正在比较的矩形的颜色

例如，当

数组[i]

与

数组[i+1]

比较时，我想更改这些颜色（例如绿色和红色）

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
变量数组=[10150,17200,300,110400,260,105157,180208,400122,40266123]；
绘制线（阵列）；
功能睡眠（ts）{
返回新承诺（（解决、拒绝）=>{
返回setTimeout（解析，ts）
})
}
异步函数init（）{
常量it=bubbleSort（数组）
让result=it.next（）
而（！result.done）{
ctx.clearRect（0,0800500）
绘制线（阵列）；
结果=it.next（）；
等待睡眠（500）
}
console.log（'finished！'）
}
函数绘制线（数组）{
让高度；
设位置=5；
ctx.font=“10px Verdana”；
对于（i=0；i数组[i+1]）{
var-temp=数组[i]；
数组[i]=数组[i+1]；
阵列[i+1]=温度；
交换=真；
产量
}
}
}while（交换）；
};
#我的画布{
边框：1px实心#000000；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
宽度：800px；
}
.矩形{
宽度：20px；
利润率：20px；
背景色：#555；
}

冒泡排序冒泡排序
气泡排序
fillStyle命令可以更改矩形的颜色！
例如，在drawLines函数中

function drawnLines(array) {
  let height;
  let position = 5;

  ctx.font = "10px Verdana";

  for (i = 0; i < array.length; i++) {
    height = array[i];
    //Here you can enter in a color!
    ctx.fillStyle = "#eee";

    ctx.fillRect(position, 5, 20, height);
    ctx.strokeText(array[i].toString(), position, array[i] + 20);
    ctx.stroke();
    position += 48;
  }
};

您可以参考此网站了解更多详细说明：
fillStyle命令可以更改矩形的颜色！
例如，在drawLines函数中

function drawnLines(array) {
  let height;
  let position = 5;

  ctx.font = "10px Verdana";

  for (i = 0; i < array.length; i++) {
    height = array[i];
    //Here you can enter in a color!
    ctx.fillStyle = "#eee";

    ctx.fillRect(position, 5, 20, height);
    ctx.strokeText(array[i].toString(), position, array[i] + 20);
    ctx.stroke();
    position += 48;
  }
};

您可以参考本网站了解更多详细说明：
您可以使用“ctx.fillStyle”更改颜色，但会更改所有矩形。我只想操纵一个。您可以使用“ctx.fillStyle”更改颜色，但这会更改所有矩形。我只想操纵一个。