Fast Text width & height

[vilterp]

Adding something like textWidth : Text -> Float and textHeight : Text -> Float to either Graphics.Collage or Text would be nice for laying out graphics which include text, but also forms. I suspect using the canvas's measureText method would be faster than the current way of getting text width & height, which is making the text into an element and using widthOf, which uses the DOM.

This would be a good addition to the recent change allowing direct rendering of text to canvas (#118).

I'm currently developing an app in which elements containing text are dragged and dropped. Constructing the Forms every frame from the data model involves getting the widths of each piece of text, and according to the Chrome profiler getting this width (the htmlHeight method) is taking up the most time of anything in my code on each frame.

[vilterp]

Here's a test showing measureText being 15x faster when I ran it (120k ops/sec vs. 8k ops/sec): https://jsperf.com/text-measurement-element-vs-canvas

[vilterp]

Here's a test showing measureText being 15x faster when I ran it (120k ops/sec vs. 8k ops/sec): https://jsperf.com/text-measurement-element-vs-canvas

[vilterp]

Implemented this as a native module in elm-diagrams; unfortunately canvas and DOM do not measure text width the same way, and canvas does not measure text height at all (see vilterp/elm-diagrams#36). So, not sure how to go about this.

[vilterp]

Implemented this as a native module in elm-diagrams; unfortunately canvas and DOM do not measure text width the same way, and canvas does not measure text height at all (see vilterp/elm-diagrams#36). So, not sure how to go about this.

[evancz]

Sorry this did not get attention til now! The Graphics.* modules now live in evancz/elm-graphics so I am trying to get stuff migrated over there.

That said, I would like to keep that API stable for now. I expect to be focusing on <canvas> for professional users and "friendly graphics" for learning as separate use cases. Progress will be made when those start happening.

[evancz]

Sorry this did not get attention til now! The Graphics.* modules now live in evancz/elm-graphics so I am trying to get stuff migrated over there.

That said, I would like to keep that API stable for now. I expect to be focusing on <canvas> for professional users and "friendly graphics" for learning as separate use cases. Progress will be made when those start happening.