This doesn't help, but testing in the browser, I see the issue: the resolution of the element changes with the app. The problem is that when the resolution goes down, the canvas just lacks resolution, and it's normal that the text becomes blurry.

I can get crisp text by forcing the canvas to stick to a resolution of 1080p and giving it the styles height:100% and width:100%, so it doesn't overflow from its parent frame.

And so, I think it's just a matter of changing the canvas-container so it doesn't lower the resolution of the child canvas too much.

I noticed this code in the JS

    const onResize = () => {
      const { width, height, ratio } = snappedAspectRation();
      canvas.width = width;
      canvas.height = height;
      console.log({ width, height, ratio });
      canvasContainer.style.setProperty(`width`, `${width}px`);
      canvasContainer.style.setProperty(`height`, `${height}px`);
      document.documentElement.style.setProperty("--scale", `${ratio}`);
    };

It seems like the cause to me.

Current (canvas-container makes the canvas render at 960x540):

With a fixed canvas resolution of 1080p

It used to be set at 100%, the javascript code that resizes the canvas was made specifically to answer another bug... I'll try digging to remember

It was that commit: ca3d17f

It fixes bug #253 (the commit also fixes #315 incidentally, but that's not important for our purposes)

So it seems we have the following options:

• 100% width and height, but interactive areas don't align with the graphics on Firefox.

or

• width and height set in JS, but then the canvas lacks enough pixels to display fonts properly on zoomed-in devices.

Another option is to

• let Godot handle width and height, as it does in the default template, but we didn't want that because... Of some yet another bug. I'll go hunting.

Ah that was why!

The reason why we aren't letting Godot handle the size are:

• max_screen icon issue #226
• Change the full-screen button's icon when toggling full-screen from the browser (and not from the app) #272
• Fullscreen in Chrome/Firefox disturbs the button detection #208

All three were fixed in #278

To summarize the reasons for that PR:

1. our fullscreen button in Godot could not know if the browser was set to full screen through F11, so the fullscreen icon could indicate the wrong state. So we decided to handle this in JS instead
2. we cannot call the JS to fullscreen from Godot, for sandboxing reasons. So we overlay a button in JS over the Godot frame
3. To overlay the button correctly, we need to input specific measurements, because some browsers (looking at you, firefox) don't allow us to query back the canvas size
4. Therefore, we decided to set the canvas at specific sizes, so the button could always be aligned (ca3d17f)

In summary, our options:

1. Use Godot fullscreen:

• +: less code, interactive overlays should work in all circumstances
• -: cannot obtain browser state to change button style; cannot know if user use browser fullscreen

2. Use JS fullscreen + specific canvas sizes

• +: button can be overlayed precisely, fullscreen state is tracked
• -: font become blurry if the pixel aspect is not 1:1

3. Use JS fullscreen + CSS 100% + query canvas size on size change

• +: fullscreen state is tracked, fonts are not blurry
• -: on firefox, querying is imprecise, button will not be placed correctly

I will try to set specific percentages in JS, a mix of 2 and 3, and see what happens.

Another option would be to overlay the fullscreen button at the bottom or top right, regardless of canvas size.

I allowed the canvas container (a simple div) to resize to specific sizes, but made the canvas fill the entire available space with width: 100%; height: 100%.

It's difficult for me to test (my screen is small and 1080p), but I think it's fixed? Functionally, everything works still (interactive areas, fullscreen button alignment, and functionality) on both Firefox and Chromium.

Just tested in firefox and brave, looking great!