Javascript画布：为两个不同的对象（正方形）设置自己的颜色

我对这个问题很失望。 因此，我有以下简单的代码：

var canvas = document.getElementById('canvasField');
var ctx = canvas.getContext('2d');

function Square(x, y, sizeOfSide) {

    this.draw = function () {
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x + sizeOfSide, y);
        ctx.lineTo(x + sizeOfSide, y + sizeOfSide);
        ctx.lineTo(x, y + sizeOfSide);
        ctx.lineTo(x,y);
        ctx.closePath();
        ctx.stroke();
    }

    this.setColor = function (color) {
        ctx.fillStyle = color;
        ctx.fill();
    }
}

正方形是我的目标。我可以画正方形，也许我可以为它设置填充颜色。所以下一个代码可以正常工作

var square1 = new Square(100, 100, 100);
var square2 = new Square(250, 200, 100);
square1.draw();
square1.setColor('green');
square2.draw();
square2.setColor('yellow');

但如果我把它改成这样：

var square1 = new Square(100, 100, 100);
var square2 = new Square(250, 200, 100);
square1.draw();
square2.draw();

square1.setColor('green');
square2.setColor('yellow');

它细分为：

---

在我看来，我明白原因。两个对象具有相同的上下文。square2为上下文设置黄色，square1失去颜色。也许我不对。我希望它们是两个独立的对象，并且我能够在代码中的任何位置操纵它们的条件。我不知道下一步该怎么办。请帮忙

大多数情况下，当你想在画布上更改某些内容时，你必须重新绘制。您的第一块代码很好，如果要更改正方形的颜色，请使用setColor，然后再次绘制它。

DEMO

var canvas=document.getElementById（'canvasField'）；
var ctx=canvas.getContext（'2d'）；
功能方块（x、y、sizeOfSide）{
this.draw=函数（）{
ctx.beginPath（）；
ctx.moveTo（x，y）；
ctx.lineTo（x+sizeOfSide，y）；
ctx.lineTo（x+sizeOfSide，y+sizeOfSide）；
ctx.lineTo（x，y+sizeOfSide）；
ctx.lineTo（x，y）；
ctx.closePath（）；
ctx.stroke（）；
}
this.setColor=函数（颜色）{
这个.draw（）；
ctx.fillStyle=颜色；
ctx.fill（）；
}
}
//var square1=新的平方（100100100）；
//var square2=新的平方（250200100）；
//square1.draw（）；
//正方形1.设置颜色（“绿色”）；
//2.draw（）；
//平方2.设置颜色（“黄色”）；
var square1=新的平方（100100100）；
var square2=新的平方（250200100）；
//square1.draw（）；
//2.draw（）；
正方形1.设置颜色（“绿色”）；
平方2.设置颜色（“黄色”）
画布{
边框：2件点蓝色；
}
如果要使用like独立对象，请尝试使用like库。在第二个代码中，它不起作用，因为您使用
beginPath
创建了另一个路径，并关闭了上一个路径。所以填充颜色适用于第二个对象，而不是第一个对象。是的。如果我只删除beginPath和ClosePath两行，两个正方形将是黄色的。我可以不使用第三方库来修复它吗？将填充当前路径，调用
this.draw（）
也在
setColor
ctx
没有
fillStyle