New issue
Advanced search Search tips

Issue 32879 link

Starred by 17 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Jul 2012
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Restricted
  • Only users with Commit permission may comment.



Sign in to add a comment

fillText() function on <canvas> doesn't work with @font-face remote fonts

Project Member Reported by yusukes@chromium.org, Jan 22 2010

Issue description

- Google Chrome 4.0.295.0 (Official Build 35884) unstable.
- Reproduces on all platforms.

What steps will reproduce the problem?

1. Open the attached html file which draw a text on <canvas> using a remote font on onload().

<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='setTimeout(draw, 10000)'>
  <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.

- Reproduces on Safari 4 for Windows as well. Looks like a WebKit renderer issue.
- Does not reproduce on Firefox 3.5.

 
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() works fine.
<body onload='setTimeout(draw, 10000)'>

typo:
<body onload='setTimeout(draw, 10000)'> in the bug report (not the comment #1) should be
<body onload='draw()'>.


Comment 3 by karen@chromium.org, Feb 16 2010

Labels: Mstone-X kglater

Comment 4 by kerz@chromium.org, Jul 8 2010

Status: Available
Moving all bugs marked as untriaged and mstone X to be available rather than untriaged.  If you think this is in error, please feel free to set back to untriaged.

Comment 5 by kerz@chromium.org, Jul 8 2010

Moving all bugs marked as untriaged and mstone X to be available rather than untriaged.  If you think this is in error, please feel free to set back to untriaged.

Comment 6 by kan...@gmail.com, Jan 24 2011

Can't reproduce this one either (with 10.0.642.2 dev on Mac OS X)
Reproduced this problem just now using my own typekit font setup, in Chrome 12.0.742.30 dev-m on Windows.  When the page first loads, the canvas draws text in the remote font as blank.  Redrawing it by calling draw() in the console draws the text in the appropriate font.

Comment 8 Deleted

Comment 9 by joa...@gmail.com, May 20 2011

I'm able to reproduce the problem in Chrome 11.0.696.68.

Comment 10 by Deleted ...@, Jun 30 2011

I'm able to reproduce the problem in Chrome 12.0.742.112. The same amounts with 'google web fonts' embedded fonts. Does not reproduce on Firefox 5.0 and Opera 11.
I'm able to reproduce the problem in Chrome 13.0.782.99 beta, using google web fonts. Text only renders on canvas if I draw after the font has been loaded.
Status: WontFix
This is not a bug.  Since Canvas is an immediate-mode API, none of the calls are allowed to block.  So fillText is not allowed to block until the font has loaded.  The behaviour is similar to calling drawImage before the image has loaded.

Although @font-face doesn't have events which fire when the fonts are loaded (AFAICT), there do seem to be some workarounds, such as creating a <div> with a space in the @font-face you desire, or using the Google Web Font Loader (https://developers.google.com/webfonts/docs/webfont_loader).

See also http://stackoverflow.com/questions/2756575/drawing-text-to-canvas-with-font-face-does-not-work-at-the-first-time

Hope that helps!
Project Member

Comment 13 by bugdroid1@chromium.org, Oct 13 2012

Labels: Restrict-AddIssueComment-Commit
This issue has been closed for some time. No one will pay attention to new comments.
If you are seeing this bug or have new data, please click New Issue to start a new bug.
Project Member

Comment 14 by bugdroid1@chromium.org, Mar 11 2013

Labels: -Area-WebKit Cr-Content
Project Member

Comment 15 by bugdroid1@chromium.org, Apr 6 2013

Labels: -Cr-Content Cr-Blink
 Issue 252600  has been merged into this issue.
 Issue 164192  has been merged into this issue.

Sign in to add a comment