Javascript 白色背景打破了我的画布

我试图在画布上画几个形状，但遇到了一个奇怪的问题。在绘制形状之前，当我试图在画布上绘制一个白色矩形时，形状从未显示。我做错了什么

示例代码：

// drawing a white background
// This breaks it. If I comment thiese two line out, it works.
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, Canvas.width, Canvas.height);

// Draw the rectangle
ctx.lineWidth = LineWidth;
ctx.strokeStyle = Color;
ctx.beginPath();
var startPos = Ordinates[0];
ctx.moveTo(startPos.start.x, startPos.start.y);
ctx.lineTo(startPos.stop.x, startPos.stop.y);
for(var i = 0; i < Ordinates.length; i++){
  if(i === 0) continue;
  ctx.lineTo(Ordinates[i].stop.x, Ordinates[i].stop.y);
}
ctx.closePath();
ctx.fill();

//绘制白色背景
//这打破了它。如果我把这两行注释掉，它就行了。
ctx.fillStyle=“#FFFFFF”；
ctx.fillRect（0，0，Canvas.width，Canvas.height）；
//画矩形
ctx.lineWidth=线宽；
ctx.strokeStyle=颜色；
ctx.beginPath（）；
var startPos=纵坐标[0]；
ctx.moveTo（startPos.start.x，startPos.start.y）；
ctx.lineTo（startPos.stop.x，startPos.stop.y）；
对于（变量i=0；i<纵坐标长度；i++）{
如果（i==0）继续；
ctx.lineTo（纵坐标[i].stop.x，纵坐标[i].stop.y）；
}
ctx.closePath（）；
ctx.fill（）；

---

如果注释掉绘制白色背景矩形的两条线，则效果良好。我做错了什么？

填充样式是白色的。这幅画是白色的。也许可以解释。

填充样式为白色。这幅画是白色的。也许可以解释

ctx.fillStyle = "#FFFFFF"; // <-- set the fill color to white
ctx.fillRect(0, 0, Canvas.width, Canvas.height);

// Draw the rectangle
ctx.lineWidth = LineWidth;
ctx.strokeStyle = Color;
ctx.beginPath();
var startPos = Ordinates[0];
ctx.moveTo(startPos.start.x, startPos.start.y);
ctx.lineTo(startPos.stop.x, startPos.stop.y);
for(var i = 0; i < Ordinates.length; i++){
    if(i === 0) continue;
    ctx.lineTo(Ordinates[i].stop.x, Ordinates[i].stop.y);
}
ctx.closePath();
ctx.fill(); // <--- filling with white, while the background is still. you can remove this line btw
ctx.fillStyle = '#000000'; // <-- now we set it to black
ctx.fill(); // <--- filling with black now

这将以正确的颜色绘制它的轮廓

但在对v.rouge的回复中，你只是说你希望它是带黑色轮廓的白色：

ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#000000';
ctx.fill();
ctx.stroke();

完成：-）

这将以正确的颜色绘制它的轮廓

但在对v.rouge的回复中，你只是说你希望它是带黑色轮廓的白色：

ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#000000';
ctx.fill();
ctx.stroke();

---

完成：-）

您正在用白色填充，因为这是您的填充样式，并且您没有将其设置为其他颜色。当然，除非这是你想做的…我如何用白色填充它而只使用黑色笔划？在

ctx.fill（）之前设置fillStyle（）

，我会根据你用白色填充它来更新我的答案，因为这是你的fillStyle，你不会将它设置为其他颜色。当然，除非这是你想做的…我如何用白色填充它，而只使用黑色笔划？在

ctx.fill（）

之前设置fillStyle，我会相应地更新我的答案我希望填充为白色。我只想要黑色的笔划和白色的填充。如果我将背景更改为绿色，它仍然不会显示。然后尝试将笔划颜色设置为黑色？这不是我在第17行所做的吗？看到DoxickI的另一个答案吗？希望填充为白色。我只想要黑色的笔划和白色的填充。如果我将背景更改为绿色，它仍然不会显示。然后尝试将笔划颜色设置为黑色？这不是我在第17行所做的吗？请参阅Doxick的另一个答案