FINALLY fix blurry canvas/webgl renderer issues due to device pixel rounding errors 🎉

[Tyriar]

Fixes #2662
Part of microsoft/vscode#85154

Below tested on Edge 105 (dev) on Windows 11 (set at 100% scale) with the webgl renderer. The same fix applies also to the canvas renderer.

Zoom 50%

Zoom 67%

Zoom 75%

Zoom 80%

Zoom 90%

Zoom 100%

Zoom 110%

Zoom 125%

Zoom 150%

Zoom 175%

[carlfriedrich]

Hey @Tyriar, thanks for taking care of this! I just checked out your branch to test this on my machine. Is this fix automatically applied when I run yarn on this branch or do I have to modify any settings?

My first test unfortunately did not show any improvement compared to master, still having non-consistent character rendering throughout the line (sharp on the left and right edges, blurry in the middle):

Checking the canvas element's properties in the DOM:

It shows that the zoom factor is still not exact:

width / css-width = 968 / 774 = 1,2506459948320413436692506459948

Should be 1.25, since that's my display zoom factor.

[Tyriar]

@carlfriedrich the zoom factor shouldn't matter if it's not perfect with this method as we're querying the browser for the exact device pixel dimensions of the canvas. You may be using a browser that doesn't support the API in which case we fallback to the original possibly blurry method?

[carlfriedrich]

@Tyriar Hmm, not sure if I understand that correctly. What browser would you recommend?
I am using latest Firefox (102.0.1). Tested also in Edge (103.0.1264.71), behaviour is the same.

[Tyriar]

You also need to run yarn and restart the build or your won't get a successful compile

[carlfriedrich]

This is what I'm doing and the output:

Am I missing something?

[Tyriar]

@carlfriedrich make sure you run yarn watch as well, that will show you the compilation results. Start only launches the demo server

[carlfriedrich]

Okay thanks, then it shows errors:

[Tyriar]

@carlfriedrich to fix that you'll need to run yarn to install the newer version of typescript then restart it

[carlfriedrich]

@Tyriar Ah yep, I already recognized that myself. Now yarn watch doesn't show any more errors, and I indeed see a difference in Edge!

master branch:

rounding branch:

So the font is indeed crisp, thumbs up! 👍

In my Firefox, however, the rendering is the same as before. Does that mean that Firefox does not support the new API? Wouldn't be a problem, since VS Code will be the place where it is supposed to work, just curious.

[Tyriar]

Great! I didn't check Firefox, but yes vscode is based on electron which uses chromium underneath. I didn't check whether the current version of vscodes electron will have it yet, if not it will get fixed in vscode eventually after an electron update.