Why Are Artifacts Visible In A Scaled Html5 Canvas?

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., mak

Solution 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 antialiasingvar 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);

<canvasid="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).