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.