Intent to Prototype: Canvas Formatted Text

Skip to first unread message

Sushanth Rajasankar

Dec 4, 2020, 8:20:44 PM12/4/20
to, Travis Leithead

Contact emails 



Easily render multiline formatted text in Canvas, while letting the browser handle the hard parts of line-breaking and other language-specific constraints. 

Blink component 



You have a paragraph of text. You want to write it to the canvas. Canvas only supplies fill/strokeText -- only line of text at a time. Where do you break your paragraph up? Doing this is JavaScript is hard and error prone. For example, the author must consider: where are the break opportunities between words or Graphemes? Break opportunities are based primarily on the Unicode Spec but also use dictionaries for languages like Thai and French that dictate additional line breaking rules. Other consideration include identifying grapheme clusters, handling Bidi text, proper text shaping and kerning.  


Luckily, the browser already has a powerful line breaking, text shaping component used for regular HTML layout. This feature enables authors to tap into the browser's layout feature while maintaining control over the layout of multi-line formatted text. 


Initial public proposal 

TAG review 


TAG review status 



This feature exposes new functionality to the Canvas. Similar behavior is being exposed to the CSS Houdini Layout API. Our goal is to find a good balance in terms of design that harmonizes the two concepts. 


Interoperability and Compatibility 


Gecko: No signal 
WebKit: No signal 
Web developers: No signals 


Is this feature fully tested by web-platform-tests? 


Tracking bug 

Link to entry on the Chrome Platform Status 

Sushanth Rajasankar

Dec 8, 2020, 4:27:35 PM12/8/20
to, Sushanth Rajasankar, Travis Leithead
Fixing the row for "Web Developer signals"

We do have positive signals from web developers, they are interested in adopting this API for both performance and correctness reasons

nhelfman · GitHub - Excel Online - Microsoft


From: 'Sushanth Rajasankar' via blink-dev <>
Sent: Friday, December 4, 2020 4:36 PM
To: <>
Cc: Travis Leithead <>
Subject: [EXTERNAL] [blink-dev] Intent to Prototype: Canvas Formatted Text
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To view this discussion on the web visit

Ashley Gullen

Dec 9, 2020, 5:54:01 AM12/9/20
to Sushanth Rajasankar,, Travis Leithead
This would be good for our game engine Construct 3 ( as well.

Our engine renders entirely to a canvas, and for displaying text we use the canvas text APIs. Since ~2012 we've had to maintain our own custom word wrap engine in JavaScript to handle multi-line text, and I doubt it does everything this proposal does especially with regards to break opportunities and bidi text, so it would be great if the browser could handle that for us. I do think backwards compatibility would be tricky though, as switching existing content to a different word wrap engine will probably result in unwanted differences, but there's not much that can be done about that.

Daniel Bratell

Dec 10, 2020, 1:44:55 PM12/10/20
to Sushanth Rajasankar,, Travis Leithead

It does indeed sound like a good idea to leverage the browser's advanced line wrapping capabilities!

One friendly recommendation, don't wait too long with filing tag reviews and getting platform tests together, because I think this is something where there might be some discussions before everyone agrees on the best API surface.


Sushanth Rajasankar

Dec 14, 2020, 1:26:49 PM12/14/20
to,, Travis Leithead
Thanks Bratell, that is a good suggestion. We will follow up with the TAG in the new year 🙂.

From: Daniel Bratell <>
Sent: Thursday, December 10, 2020 10:44 AM
To: Sushanth Rajasankar <>; <>
Cc: Travis Leithead <>
Subject: [EXTERNAL] Re: [blink-dev] Intent to Prototype: Canvas Formatted Text

Sushanth Rajasankar

Dec 14, 2020, 1:30:28 PM12/14/20
to,, Travis Leithead
Thanks, Ashley. I'm excited to see that we can help simplify code and address your use case. Looking forward to your feedback once we have a prototype in Chromium.

From: Ashley Gullen <>
Sent: Wednesday, December 9, 2020 2:53 AM
To: Sushanth Rajasankar <>
Cc: <>; Travis Leithead <>
Subject: [EXTERNAL] Re: [blink-dev] Re: Intent to Prototype: Canvas Formatted Text
Reply all
Reply to author
0 new messages