Bug 33998

Summary:	fillText() function on <canvas> doesn't work with @font-face remote fonts
Product:	WebKit	Reporter:	Yusuke Sato <yusukes>
Component:	WebKit Misc.	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	mdelaney7, nishgau28, yoon, yusukes, yuzo
Priority:	P2
Version:	528+ (Nightly build)
Hardware:	All
OS:	All
URL:	http://code.google.com/p/chromium/issues/detail?id=32879
Bug Depends on:	25207
Bug Blocks:

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.

<html><script>
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);
}
</script>
<body onload='draw()'>
  <head>
    <style type="text/css"> <!--                                                                                                              
    @font-face {                                                                                                                              
      font-family: 'RemoteFont';                                                                                                              
      src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf') format('truetype');                                         
    }                                                                                                                                         
    --> </style>
  </head>
  <table>
    <tr>
      <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>
    </tr>
  </table>
</body></html>


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:
https://bugs.webkit.org/show_bug.cgi?id=25207

Make this bug dependent on 25207 for easier tracking.