Bug 33998 - fillText() function on <canvas> doesn't work with @font-face remote fonts
Summary: fillText() function on <canvas> doesn't work with @font-face remote fonts
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKit Misc. (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: http://code.google.com/p/chromium/iss...
Depends on: 25207
  Show dependency treegraph
Reported: 2010-01-22 05:03 PST by Yusuke Sato
Modified: 2019-05-02 16:23 PDT (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Yusuke Sato 2010-01-22 05:03:10 PST
Chromium bug: http://code.google.com/p/chromium/issues/detail?id=32879

- Reproduces both on Safari and Chrome.
- Does not reproduce on Firefox 3.5.

What steps will reproduce the problem?

Open the following html file which draws a text on <canvas> using a remote font on onload event.

function draw() {
  var fontName = 'RemoteFont';
  var canvas = document.getElementById(fontName);
  var ctx = canvas.getContext('2d');
  ctx.font = '14pt ' + fontName + ', "Courier New"';
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.fillText(fontName, 10, 25);
<body onload='draw()'>
    <style type="text/css"> <!--                                                                                                              
    @font-face {                                                                                                                              
      font-family: 'RemoteFont';                                                                                                              
      src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf') format('truetype');                                         
    --> </style>
      <td><canvas id='RemoteFont' x='20' y='20' width='250' height='50' style='border: 1px solid red'></td>
      <td><div style='font: 14pt RemoteFont'>RemoteFont in html</div></td>

What is the expected output?

A text is drawn.

What do you see instead?

Nothing is drawn.

Please use labels and text to provide additional information.

fillText() function for <canvas> seems not to wait for a remote font to be finished downloading and seems to give up writing a text early (please note that the onload function is called _before_ a remote font is finished downloading).

I also confirmed that fillText() can write a text on a <canvas> element using a remote font if the font is already downloaded. For example, if I rewrite the onload function as follows, fillText() in draw() may work fine.
<body onload='setTimeout(draw, 10000)'>
Comment 1 Yuzo Fujishima 2010-09-16 22:27:26 PDT
This bug may be solved if we fix:

Make this bug dependent on 25207 for easier tracking.