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:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

karlcow, mdelaney7, nishgau28, yoon, yusukes, yuzo

Priority:

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:

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none

Yusuke Sato

Reported 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">  </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)'>

Attachments
rendering in safari, firefox, chrome (474.46 KB, image/png) 2024-05-14 03:34 PDT, Karl Dubost	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Yuzo Fujishima

Comment 1 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.

Karl Dubost

Comment 3 2024-05-14 03:34:58 PDT

Created attachment 471396 [details] rendering in safari, firefox, chrome working everywhere. https://codepen.io/webcompat/pen/ExzjNOm

Note You need to log in before you can comment on or make changes to this bug.