Support new Canvas font properties

glideapps / canvas-hypertxt

The fastest way to layout wrapped text on a HTML5 canvas

MIT License

102 stars 10 forks source link

Support new Canvas font properties #2

Closed Awendel closed 2 years ago

Awendel commented 2 years ago

Chrome has recently released new font properties for the Canvas API:

https://developer.chrome.com/blog/canvas2d/

Important aspects:

letter-spacing
word-spacing
font-style

all these would affect the line breaking algorithm

.measureText() does incorporate these already, so would be great to add it to your library

jassmith commented 2 years ago

Im not sure why these wouldn't work. This library takes in the ctx "as is" and uses it to perform measurement.

Awendel commented 2 years ago

My bad, read the example code wrong - yes by passing on ctx object this should be taken care of. One could think about offering a polyfill for Firefox etc. - will probably be a while before it lands. letterSpacing and wordSpacing shouldn't be too hard to compute based on how many displayChars and wordSeperators are inside a given line. I understand of course if its out of scope for this lib to polyfill canvas behaviour