0

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>
ScottyB
  • 2,167
  • 1
  • 30
  • 46

1 Answers1

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).

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thanks. So if my scaling needs to be arbitrary, it sounds like I need to not use canvas scaling but instead calculate it myself and avoid drawing on fractions of pixels. Is that right? – ScottyB Sep 15 '18 at 04:48
  • @ScottyB yes... or at least be sure that coordinate * scale is an int. – Kaiido Sep 15 '18 at 05:02
  • I replaced my canvas with an svg element. It may have other challenges, but it’s more versatile, performance is good at least for my purposes, and (of course) it doesn’t have this issue! – ScottyB Sep 17 '18 at 05:00
  • Ah... sorry to bring a bad news, but svg suffers the same issue... https://jsfiddle.net/uzgso13v/ – Kaiido Sep 17 '18 at 05:09
  • Interesting, but I think the difference is that I’m using JavaScript to change the fill color of an existing rect, so it completely changes it. Even if it has antialiasing on the edges, at least it’s appropriate for the new color. Thanks again. – ScottyB Sep 17 '18 at 05:17