Why does lineTo() change interior pixels?

This situation is difficult to explain, so let me illustrate with a picture:

Those pixels inside the first shape created are lightened. The screen is cleared with black, the red and green boxes are drawn, then the path is drawn. The only fix that I've found so far was setting the line width of the boxes to 2 pixels, for the reasons outlined here.

Here's the code being used to draw the squares:

sctx.save();
sctx.strokeStyle = this.color;
sctx.lineWidth = this.width;
sctx.beginPath();
sctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++)
{
    sctx.lineTo(this.points[i].x, this.points[i].y);
}
sctx.closePath();
sctx.stroke();
sctx.restore();

And the lines:

sctx.save();
sctx.strokeStyle = 'orange';
sctx.lineWidth = 5;
console.log(sctx);
sctx.beginPath();
sctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++)
{
    sctx.lineTo(this.points[i].x, this.points[i].y);
}
sctx.closePath();
sctx.stroke();
sctx.restore();

And a picture of the same situation where the boxes are drawn at 2px width:

Is lineTo() perhaps messing with the alpha values? Any help is greatly appreciated.

EDIT: To clarify, the same thing occurs when sctx.closePath(); is omitted from the path being drawn.