3 ms·
As someone who's never worked with canvas, I'm now curious about how it works. What is the workflow like for rendering text? Under the hood, is canvas implemen
by IceHegel 5y ago
As someone who's never worked with canvas, I'm now curious about how it works. What is the workflow like for rendering text?
Under the hood, is canvas implemented using WebGL APIs or do browsers have their own separate implementation for canvas?
- rikroots 5y agoThe canvas 2D API[1] has support for rendering text, but it is ... limited. For instance, there's no inbuilt multiline support. Which means that if you're serious about rendering text to the canvas, then you have to reimplement a whole host of things yourself in Javascript. Another worry is that browsers have an inconsistent approach to interpreting `ctx.font = "CSS font string"` - Safari, for instance, does not support the 'bold' keyword; the only way to get that browser to display bold text is to supply it with an already emboldened font. However with a lot of work, it's possible to do some amazing things with text. Below, links to a couple of demos of text rendering using my own canvas library[2][3]. [1] I highlight the 2D engine because the Google Workspace team specifically linked to the W3C HTML Canvas 2D Context specs in their announcement. I understand that rendering text in the WebGL context is far more complicated. https://www.w3.org/TR/2dcontext/ https://www.w3.org/TR/2dcontext/ [2] https://scrawl-v8.rikweb.org.uk/demo/canvas-017.html https://scrawl-v8.rikweb.org.uk/demo/canvas-017.html - Phrase entity: test lineHeight, letterSpacing and justify attributes. Section classes functionality [3] https://scrawl-v8.rikweb.org.uk/demo/canvas-018.html https://scrawl-v8.rikweb.org.uk/demo/canvas-018.html - Phrase entity - text along a path