I'm not sure but;

I guess while OpenFL draws better on high resolution screens; It draws worse on low resolution screens.

I was able to get crisp text to render by doubling the ratio on HiDPI screens before scaling it, but it also requires passing the ratio directly from the window since the renderer can be null for TextFields.

The text is still blurry even with the new PR, but only on Chromium-based browsers. It appears to be a separate issue where Firefox scales things smoothly, but there's a heavy upscaling noise with Chrome:

Within CanvasTextField, the new code dynamically sets the scale as follows:
var pixelRatio = (renderer.__pixelRatio > 1) ? (renderer.__pixelRatio * 2) : renderer.__pixelRatio;

However, Chrome still is applying some kind of upscaling and resulting in the image above. When I try setting the CanvasTextField to instead use var pixelRatio = 3;, the text no longer had any artifacts at any scaled resolution, even with higher pixel ratios.

I'm not sure why "3" seems to be the magic number for the pixelRatio, as anything less than that is still blurry in Chrome and anything more is potentially overkill. I'm not sure what the best balance is for trying to render standard fonts and blocky fonts, but I'm happy to hear any thoughts on this.

Are you sure the problem is not the font?

Yes, it's like that with every font

Also, something to note - when resizing the page in the browser, the texts resolution stays the same - the means upscaling the page will make text look really low quality.

Thought I'll mention this because it might be related to the same problem

Yes, I've tried a couple different pixel fonts and they all exhibit the problem with the pixelRatio. What further complicates things is that each browser upscales differently and there are further differences depending on which OS the browser is running on and the display type (Retina / HiDPI).

Here are the results for different pixelRatio tests for Chromium-based browsers on Windows:

pixelRatio = 1

pixelRatio = 2

pixelRatio = 3

The minimum scale that smooths out scaling artifacts for blocky fonts is a value of 3. In the first version, you can see artifacts on both sides of the text glyphs. With a scale of 2, you can see it smooths out one side but there is still an scaling problem on the other. When scaling to 3, both sides are smoothed out and the text renders with crisp edges.

I think allowing the user to pass a compiler flag, something like openfl_pixel_font, to render all text with crisp edges is a possible solution. Within CanvasTextField, I added the new define:

...
if (textField.__dirty || graphics.__softwareDirty)
{
            #if openfl_pixel_font
            var pixelRatio = 3;
	    #elseif (openfl_disable_hdpi || openfl_disable_hdpi_textfield)
	    var pixelRatio = 1;
            #else
            var pixelRatio = renderer.__pixelRatio;
	    #end

	    var width = Math.round(graphics.__width * pixelRatio);
            var height = Math.round(graphics.__height * pixelRatio);
...

With this code, adding the define openfl_pixel_font forces the text to render with sharp edges on all platforms I tested. These include Windows (Firefox, Chrome), macOS (Firefox, Chrome, Safari) and macOS with Retina display (Firefox, Chrome, Safari).

Does this sound like an acceptable fix or should we go a different direction?

Just wondering - after a window resize, is the text still crisp?

(resizes with ctrl +/-)

Just wondering - after a window resize, is the text still crisp?

(resizes with ctrl +/-)
Zooming with the browser did not affect the text blur or other graphics.

The main issue with text specifically is that the actual graphic texture is being stretched out and when relying on Chromium's renderer, it creates a streaking effect on either side of the text. You can see the problem happening here as well: https://community.openfl.org/t/html5-blurry-font-issue/12712