Text on canvas

Canvas has a function for measuring text dimensions measureText. If we want to do some typography work — we should split the text to the smallest tokens (characters) and manually place them around.

While coding this I understood that I've already implemented all this logic in my drawing library, and now I am doing the same logic again in an uglier way. So I took the engine and implemented skewX, skewY in it:

Good start, but dimensions of characters are not correct yet. We can not measure text height with measureText. There were problems in Firefox before Released 116 on 2023-08-01, but now I think we can finally use it!

Let's draw all information that can be extracted from the measureText. It may be a useful tool for somebody.



This is a not finished article. It looks like I would have to do my own text renderer, so I would add some insights.