Why are artifacts visible in a scaled html5 canvas

Question

I've seen this and this discussion about removing antialiasing in canvases, but I don't think this is the same thing.

After scaling an html5 canvas by an arbitrary value (i.e., making it responsive), I've noticed that if I draw two rectangles of the same size and in the same location, the edges of the scaled side of the first rectangle remain visible.

I've included an example snippet where I draw a grey rectangle, then draw an red rectangle on top of it. There's a one-pixel red vertical line on the left and right edges of the grey rectangle. I know it may seem trivial, but it's very noticeable in my situation.

How do I fix this? Thanks!

var example = document.getElementById("example");
var ctx = example.getContext('2d');

ctx.scale(1.13,1);

ctx.fillStyle = "LightGrey";
ctx.fillRect(10,10,50,30);

ctx.fillStyle = "Black";
ctx.font = "20px Arial";
ctx.fillText("< Looks good.",70,30);

ctx.fillStyle = "Red";
ctx.fillRect(10,50,50,30);

// This light grey rectangle should completely cover the previous red one, but it doesn't!
ctx.fillStyle = "LightGrey";
ctx.fillRect(10,50,50,30);

ctx.fillStyle = "Black";
ctx.font = "20px Arial";
ctx.fillText("< Do you see red?",70,70);

<canvas id="example"></canvas>

Answer 1

You are scaling the transform matrix by a factor of 1.13 on the X axis.

So your coordinate 10, will actually end up on at coordinate 11.3 on the real pixels matrix.

You can't draw on fraction of pixels, so indeed antialiasing will kick in here.

So why does the first one looks better?

Because the mix between grey and white* is more neutral than the one between red grey and white. But even your first rect is antialiased.

Just zoom in your canvas and you'll see it, there is a one pixel band on both sides that is actually semi-transparent.

_{* "White" here is the one of the page's background}

var example = document.createElement("canvas");
var ctx = example.getContext('2d');

ctx.scale(1.13,1);

ctx.fillStyle = "LightGrey";
ctx.fillRect(10,10,50,30);

ctx.fillStyle = "Red";
ctx.fillRect(10,50,50,30);

ctx.fillStyle = "LightGrey";
ctx.fillRect(10,50,50,30);

// draw bigger with no antialiasing
var z_ctx = zoomed.getContext('2d');
zoomed.width = example.width * 10;
zoomed.height = example.height * 10;
z_ctx.imageSmoothingEnabled = false;
z_ctx.drawImage(example, 0,0, zoomed.width, zoomed.height);

<canvas id="zoomed"></canvas>

So how to avoid this?

Well simply avoid filling at non integer pixel coordinates. This means you have to be constantly aware of your context transformation matrix too, not only of the values you pass to the drawing functions.

(Ps: also remember that stroke is an even eviler beast since it start drawing from the middle of the line, so in this case, you even have to take into considerations the lineWidth, see this Q/A on the matter).