Javascript 画布多边形函数在错误的时间填充

我写了自己的多边形函数；问题是，当我想让多边形只绘制一个边界时，它最终使用上一个fillStyle并在上一个多边形上绘制

var canvas=document.getElementById（'canvas'）
var ctx=canvas.getContext（'2d'）
常数HP_暗绿色='#003100'
常数HP_浅绿色='#007E00'
var health=50
函数多边形（x1，y1，边框={
颜色：'黑色'，
宽度：1，
lineJoin:'圆形'，
线头：“方形”
}，fillColor=false，…坐标）{
/*在给定坐标数组的情况下绘制多边形*/
设c=coords
ctx.translate（x1，y1）
如果（边界）{
ctx.strokeStyle=border.color
}
ctx.beginPath（）
对于（设i=0；i{
clearRect（0，0，canvas.width，canvas.height）
},
更新：（）=>{
Render.clear（）
Render.display.health（）
requestAnimationFrame（（）=>{
Render.update（）
})
}
}

---

你在找这样的东西吗

var canvas=document.getElementById（'canvas'）
var ctx=canvas.getContext（'2d'）
常数HP_暗绿色='#003100'
常数HP_浅绿色='#007E00'
var health=50
函数多边形（x1，y1，边框={color:'black'，width:1，lineJoin:'round'，lineCap:'square'}，fillColor=false，…坐标）{
/*在给定坐标数组的情况下绘制多边形*/
设c=coords
ctx.translate（x1，y1）
if（border）{ctx.strokeStyle=border.color}
ctx.beginPath（）
对于（设i=0；i好吧，答案正是您所期望的。与此完全无关的一行未完成的代码导致了所有问题。编程很有趣。
不，我可以很容易地完成。我遇到的问题是第三个多边形（在您的例子中是红色边框的多边形）使整个条呈浅绿色。这不会发生在JSFIDLE上。我将尝试添加更多代码来复制此问题。