javascript - How do I wait for first canvas-repaint until @font-face-font is loaded? - Stack Overflow

admin管理员组

文章数量:1391951

I have a HTML5-canvas and write text with context.fillText(...); using a @font-face-font.
Displaying the page with Firefox (3.6) I have the problem, that on the first paint of the canvas the font is not downloaded yet so the text will be displayed with a standard-font.
I found a 'solution' here but it does not work, because the font is only used in the canvas and the canvas is loaded and displayed with ajax using jQuery.
Is there any better solution than trying to use a timeout setTimeout(repaintCanvas, 500);?

I have a HTML5-canvas and write text with context.fillText(...); using a @font-face-font.
Displaying the page with Firefox (3.6) I have the problem, that on the first paint of the canvas the font is not downloaded yet so the text will be displayed with a standard-font.
I found a 'solution' here but it does not work, because the font is only used in the canvas and the canvas is loaded and displayed with ajax using jQuery.
Is there any better solution than trying to use a timeout setTimeout(repaintCanvas, 500);?

• javascript
• jquery
• html
• canvas
• font-face

Share Improve this question Follow asked Aug 3, 2010 at 7:32 dstdst 1,7861313 silver badges2727 bronze badges 1

• See stackoverflow./questions/2756575/… – a paid nerd Commented Nov 22, 2011 at 7:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

well, you could try this,

$.get('font/url.ttf',function(){
   // do canvas codes.... cause font is loaded...
});

I think I found a solution with the help of Reigel's answer:

$.get('font/url.ttf', function() {
    // do canvas codes.... cause font is loaded...
});

Additionally use the font via font-family: 'fontfacename'; for the canvas' parent-element.
Could be that the font is loaded twice, don't know. But without the second load it won't be displayed right.

本文标签： javascriptHow do I wait for first canvasrepaint until fontfacefont is loadedStack Overflow