[Webkit-unassigned] [Bug 33998] New: fillText() function on <canvas> doesn't work with @font-face remote fonts

Fri Jan 22 05:03:11 PST 2010

https://bugs.webkit.org/show_bug.cgi?id=33998

           Summary: fillText() function on <canvas> doesn't work with
                    @font-face remote fonts
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
               URL: http://code.google.com/p/chromium/issues/detail?id=328
                    79
        OS/Version: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebKit Misc.
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: yusukes at chromium.org
                CC: yusukes at chromium.org

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)'>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.