[HTML5] Blurry font problem

Hello, I’m trying to display a simple, non transformed text using a bitmap font (using openfl.text.TextField), but I fail to do it without extreme blur. Are there any known fixes/undocumented options to achieve it? Here is a screenshot of the blur using TextField with font size 16 (and example of how size 8 of that font should look on the button).

image

Could you please try setting the textField.antiAliasType to AntiAliasType.ADVANCED and textField.sharpness to 400? Thanks :slight_smile:

This doesn’t seem to have any kind of impact on the look of the font. I also tried it with another font and here are the results:

I actually don’t mind how the second font looks, but just wanted to show that the sharpness didn’t have any impact at least at this size font.

We have code to disable anti-aliasing on canvas TextField:

https://github.com/openfl/openfl/blob/develop/openfl/_internal/renderer/canvas/CanvasTextField.hx#L197-L204

…but there’s a chance that it’s getting smoothed in the OpenGL pass (by mistake):

https://github.com/openfl/openfl/blob/develop/openfl/_internal/renderer/opengl/GLShape.hx#L57

Does it look different (with ADVANCED, sharpness 400) if you openfl test html5 -Dcanvas or openfl test html5 -Ddom?

I’ve built it with -Dcanvas and -Ddom with the same settings as above and got pretty much the same result (different sharpness level didn’t influence the way it looks).

Most likely you have a problem with the scale.
Try to set the absolute size to your canvas.
For example, if you want a 500x500 canvas, then you need something like this in your template:

#openfl-content { width: 500px; height: 500px};

lime.embed(
  "::APP_FILE::", 
  "openfl-content", 
  500 * window.devicePixelRatio, 
  500 * window.devicePixelRatio, 
  { parameters: {} }
);