0

I'm writing a canvas-based app which is being shown on low resolution LED matrix RGB panels. It runs in Node JS and sends RGBA image bytes to a socket of a receiver.

Because of the low resolution, I need pixel perfect text rendering, to make smaller fonts look as crisp as possible. Anti-aliasing etc doesn't matter her, since the pixels are already very large on the LED panels.

I've played around with the display settings of Windows 2000, and on the attached screenshot, the "Message box" and "Message text" shows how Tahoma 11 and 14 pt are rendered in Windows 2000 and on my canvas.

Here's the code I use

    ctx.textDrawingMode = 'glyph'

    ctx.font = '14pt tahoma'
    ctx.fillStyle = 'white'
    ctx.fillText('Message text 14pt', 20, 60)

    ctx.font = '11pt tahoma'
    ctx.fillStyle = 'white'
    ctx.fillText('Message box 11pt', 20, 20)

I have also tried changing these options, but with no visual change to the font rendering. Even when antialiasing off, and all paths are pixelated, the text is still rendered with antialiasing, and not like in old Windows versions.

  ctx.antialias = 'none'
  ctx.quality = 'best'
  ctx.textRendering = "optimizeLegibility"

Is there anything more I can try, or do I have to live with this, when rendering text in a canvas? enter image description here enter image description here

Esben von Buchwald
  • 2,772
  • 1
  • 29
  • 37
  • 2
    What exactly do you mean by "pixel perfect"? The word "perfect" to me does not have much to do with what Windows looked like 20 years ago. – Pointy Oct 07 '22 at 13:24
  • 1
    Maybe node-canvas has some options, I'd have to dig their docs and don't have time right now... However, you certainly want `ctx.textRendering = "geometricPrecision"` instead. Also, if you have a fixed sized monitor, you could consider a bitmap spritesheet with all the glyphs already prerendered. – Kaiido Oct 07 '22 at 13:59
  • 2
    I guess there's no way to render truetype fonts in a pixel-perfect manner, just because they don't have any pixel data, only outlines and hints. Your best bet would be to obtain an actual bitmap font, load it in your application and use `ImageData` to draw letters as pixels. That's a lot of work, I hope the app in question is not a text editor ;) – gog Oct 07 '22 at 14:11

0 Answers0