search

1j01 / jspaint

🎨 Classic MS Paint, ＲＥＶＩＶＥＤ + ✨Extras
https://jspaint.app/about
MIT License
7.18k stars 560 forks source link

[ REQUEST ] Aliasing option in text mode. #242

Open jexxmusic1 opened 2 years ago

jexxmusic1 commented 2 years ago

Aliasing option in text mode. I would really like if you could add an option to alias the text in JSPaint.

image

The only option I could find using Javascript is this: const converted = { canvas: { fontSmooth: "never", WebkitFontSmoothing: "none" } }

Further explanation to discuss.

1j01 commented 2 years ago

I played around with forcing aliasing by applying a threshold, but wasn't happy with the results at small font sizes since it could create gaps and weird wide stems and such. I also considered switching aliasing on/off based on the font size, but I don't want to do that. I could add an option, but I don't have an options window to add it to yet (I've sort of been avoiding that). I think I tried font-smooth: never; -webkit-font-smoothing: none; but I don't remember if I got it to work, or if it was any better at small scales. It's non-standard though. If I could get it working cross-browser/cross-platform and looking good at small scales, I'd enable aliasing by default.

1j01 commented 2 years ago

By the way, here's a jsfiddle where you can play around with this if you wish: https://jsfiddle.net/1j01/qkvfjn1r/ (and a rich text version: https://jsfiddle.net/1j01/wnac09u3/) I also thought about skeletonizing text, but this is a flawed approach: https://jsfiddle.net/1j01/3jkepyfv/8/ Probably a new text rendering system is needed that can use pixel hinting information, and if it's not available, make guesses.