Question

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.

Answer 1

It would seem as though this is a currently undocumented rendering bug that for some reason appears on all platforms. There is very little info out there about it, and it will hopefully be attended to before HTML5 is the official standard.

As a workaround, don’t use lineTo()‘s, use multiple sets of single lines.