1442074 - Render bold font text (font weight 600 or higher) in canvas is not working. Re-render works.

Status: REOPENED

(Core :: Layout: Text and Fonts, defect, P5)

Description

[xryanchen]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

Steps to reproduce:

Just create a canvas element, and try to render text by 

var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); ctx.font = 'bold 48px serif'; ctx.fillText('Hello world', 50, 100);

I also created ticket here https://github.com/mozilla/geckodriver/issues/1192


Actual results:

it won't render text unless something re-trigger the render logic and let it render again.


Expected results:

The above code should render text 'Hello world' in canvas

Comment 1

[ovidiu boca[:Ovidiu]]

Can you please add a minimal test case for this, maybe you can use jsbin.com?
Thanks

Comment 2

[ovidiu boca[:Ovidiu]]

Hi,
Marking this as Resolved: Incomplete due to the lack of response from xryanchen .
If the issue is still reproducible with the latest Firefox version, feel free to reopen the bug with more information.

Comment 3

[xryanchen]

@oliv(In reply to ovidiu boca[:Ovidiu] from comment #2)
> Hi,
> Marking this as Resolved: Incomplete due to the lack of response from
> xryanchen .
> If the issue is still reproducible with the latest Firefox version, feel
> free to reopen the bug with more information.

Sorry Ovidiu for the super late reply. I found the issue was actually caused by canvas not able to consistently render web fonts. We are using Roboto font in canvas and using font weight 500. However Firefox has issue rendering that consistently. I noticed that safari 10 has similar issue.

Comment 4

[ovidiu boca[:Ovidiu]]

Hi xryanchen,

It will be a good idea to try testing this in safe mode. Here is a link that can help you:
https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode

Can you please try to reproduce this with FF Nightly? Please download Firefox Nightly from here: https://nightly.mozilla.org/ and retest the problem.

Also if it's possible please attach a reduce test page for this issue in order to try to reproduce it. Thanks

Comment 5

[Jonathan Kew [:jfkthame]]

(In reply to xryanchen from comment #3)
> @oliv(In reply to ovidiu boca[:Ovidiu] from comment #2)
> > Hi,
> > Marking this as Resolved: Incomplete due to the lack of response from
> > xryanchen .
> > If the issue is still reproducible with the latest Firefox version, feel
> > free to reopen the bug with more information.
> 
> Sorry Ovidiu for the super late reply. I found the issue was actually caused
> by canvas not able to consistently render web fonts. We are using Roboto
> font in canvas and using font weight 500. However Firefox has issue
> rendering that consistently. I noticed that safari 10 has similar issue.

It sounds like this issue here, then, is that the page is trying to render <canvas> text with a web font, but not ensuring that the web font is fully loaded and ready before calling drawText(). Unlike HTML text, which will automatically update when the font finishes loading, canvas simply draws at the time drawText() is called; to refresh the text if a new font resource has become available, you'd need to explicitly repeat the drawText() call. (Which is why re-triggering the rendering code, after the font resource has had time to load, gives you the expected result.)

Remember that @font-face resources are *not* loaded simply as a result of the @font-face rule; the load isn't triggered until the browser needs to use that particular font for some text.

To ensure the font(s) you want to use in canvas is loaded, you should probably be using the CSS Font Loading API to explicitly load the fonts, and then proceed with drawing once they are loaded.

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API
https://drafts.csswg.org/css-font-loading/

Comment 6

[xryanchen]

(In reply to Jonathan Kew (:jfkthame) from comment #5)
> (In reply to xryanchen from comment #3)
> > @oliv(In reply to ovidiu boca[:Ovidiu] from comment #2)
> > > Hi,
> > > Marking this as Resolved: Incomplete due to the lack of response from
> > > xryanchen .
> > > If the issue is still reproducible with the latest Firefox version, feel
> > > free to reopen the bug with more information.
> > 
> > Sorry Ovidiu for the super late reply. I found the issue was actually caused
> > by canvas not able to consistently render web fonts. We are using Roboto
> > font in canvas and using font weight 500. However Firefox has issue
> > rendering that consistently. I noticed that safari 10 has similar issue.
> 
> It sounds like this issue here, then, is that the page is trying to render
> <canvas> text with a web font, but not ensuring that the web font is fully
> loaded and ready before calling drawText(). Unlike HTML text, which will
> automatically update when the font finishes loading, canvas simply draws at
> the time drawText() is called; to refresh the text if a new font resource
> has become available, you'd need to explicitly repeat the drawText() call.
> (Which is why re-triggering the rendering code, after the font resource has
> had time to load, gives you the expected result.)
> 
> Remember that @font-face resources are *not* loaded simply as a result of
> the @font-face rule; the load isn't triggered until the browser needs to use
> that particular font for some text.
> 
> To ensure the font(s) you want to use in canvas is loaded, you should
> probably be using the CSS Font Loading API to explicitly load the fonts, and
> then proceed with drawing once they are loaded.
> 
> https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API
> https://drafts.csswg.org/css-font-loading/

This is very useful information to us. Thanks! I will read more on the font loading api and see if I can get this fixed that way. 

One interesting findings is if I use normal font weight instead of bold font weight for Roboto web font, Firefox seems works fine consistently. In our page we also rendering many other text in roboto font family in surrounding areas to canvas element. The draw text logic in canvas is not getting called until we finishes loading data and processing data, which can take 5 seconds before we start rendering texts.

I hope I can add a short video or images here but I cannot find attachment button in this page...

Thanks,
Ryan

Comment 7

[xryanchen]

(In reply to ovidiu boca[:Ovidiu] from comment #4)
> Hi xryanchen,
> 
> It will be a good idea to try testing this in safe mode. Here is a link that
> can help you:
> https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-
> mode
> 
> Can you please try to reproduce this with FF Nightly? Please download
> Firefox Nightly from here: https://nightly.mozilla.org/ and retest the
> problem.
> 
> Also if it's possible please attach a reduce test page for this issue in
> order to try to reproduce it. Thanks

Hi Ovidiu,

Thanks for your fast reply! I tried in firefox Nightly and in safe mode, but the issue can be reproduced consistently.

How to attach some video or image to this so I can show you how it looks like?

I created a codepen io page try to reproduce the issue, but not successful. https://codepen.io/ryancat/pen/pVWoPj
The page actually shows text will redraw when web font available, but canvas won't. In our case, with FF canvas actually draws nothing instead of fall back to next font (in our case is sans-serif)

Thanks,
Ryan

Comment 8

[ovidiu boca[:Ovidiu]]

You can record your screen with QuickTime Player and then upload the video using this site https://streamable.com/videos and please send the link to the video.

Comment 9

[Jonathan Kew [:jfkthame]]

> (In reply to xryanchen from comment #7)
> In our case, with FF canvas actually draws nothing instead of fall
> back to next font (in our case is sans-serif)

This is expected behavior: if you try to use a web font that is not yet loaded and available, we'll render blank in the meantime unless a timeout (around 3 seconds by default) has expired, indicating a very slow download.

If you give the @font-face rule the descriptor "font-display: swap;"[1] I think this should cause a fallback face to be rendered instead of blank, when the resource has not yet loaded. But to correctly use the intended face, you need to use the font-loading API to ensure the font is actually loaded before drawing to canvas.

> One interesting findings is if I use normal font weight instead of bold font weight for Roboto web font, Firefox seems works fine consistently. In our page we also rendering many other text in roboto font family in surrounding areas to canvas element.

So the normal has already been loaded thanks to its use in the surrounding text, before you attempt to draw on the canvas.

(If the bold weight were also used in the surrounding text, that would probably cause it to load in time for the canvas drawing as well, though you shouldn't rely on this; it's a fragile dependency on exactly how the timing of loading and rendering works out. For a reliable solution you need to explicitly load the font and wait for it to be available before trying to draw with it.)


[1] https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display