Comment by susam

A few years ago, when I wrote my own Invaders-like game [1], I was quite unhappy with the rendering quality of the HTML Canvas fillText() method. The antialiasing introduced multiple shades of green, whereas I wanted to render the text in a solid monochrome green while the glyphs retained their crisp, jagged edges. Although `canvas { image-rendering: pixelated }` improved the crispness and jaggedness, it could not entirely eliminate the multiple shades of green.

I finally decided to take the matter into my own hands. I looked for IBM PC OEM fonts [2] and similar ones [3], stored the bitmaps as integer arrays within my code [2], and used them to render each character cell by cell. I am very happy with the results.

It was a childhood dream of mine to write a game like this, but I did not have sufficient access to computers as a child. So I could fulfil this dream only as an adult, a few years ago. The implementation is very simple, and everything on the canvas, including the text, is drawn using fillRect().

By the way, if you happen to do something similar, I have made all the bitmaps available as integer arrays in a separate, standalone project [5].

[1] https://susam.net/invaders.html

[2] https://int10h.org/oldschool-pc-fonts/fontlist/

[3] https://www.dafont.com/modern-dos.font

[4] https://codeberg.org/susam/invaders/src/branch/main/invaders...

[5] https://codeberg.org/susam/pcface#readme