Databases
StackOverflow2013
Postsdbo
PODrawing text to <canvas> with @font-face does not work at the first time
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrawing text to <canvas> with @font-face does not work at the first time
    text
    copied!<p>When I draw a text in a canvas with a typeface that is loaded via @font-face, the text doesn't show correctly. It doesn't show at all (in Chrome 13 and Firefox 5), or the typeface is wrong (Opera 11). This type of unexpected behavior occurs only at the first drawing with the typeface. After then everything works fine.</p> <p>Is it the standard behavior or something?</p> <p>Thank you.</p> <p>PS: Following is the source code of the test case</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;@font-face and &amp;lt;canvas&amp;gt;&lt;/title&gt; &lt;style id="css"&gt; @font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P.ttf'); } &lt;/style&gt; &lt;style&gt; canvas, pre { border: 1px solid black; padding: 0 1em; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;@font-face and &amp;lt;canvas&amp;gt;&lt;/h1&gt; &lt;p&gt; Description: click the button several times, and you will see the problem. The first line won't show at all, or with a wrong typeface even if it does. &lt;strong&gt;If you have visited this page before, you may have to refresh (or reload) it.&lt;/strong&gt; &lt;/p&gt; &lt;p&gt; &lt;button id="draw"&gt;#draw&lt;/button&gt; &lt;/p&gt; &lt;p&gt; &lt;canvas width="250" height="250"&gt; Your browser does not support the CANVAS element. Try the latest Firefox, Google Chrome, Safari or Opera. &lt;/canvas&gt; &lt;/p&gt; &lt;h2&gt;@font-face&lt;/h2&gt; &lt;pre id="view-css"&gt;&lt;/pre&gt; &lt;h2&gt;Script&lt;/h2&gt; &lt;pre id="view-script"&gt;&lt;/pre&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script id="script"&gt; var x = 30, y = 10; $('#draw').click(function () { var canvas = $('canvas')[0], ctx = canvas.getContext('2d'); ctx.font = '12px "Press Start 2P"'; ctx.fillStyle = '#000'; ctx.fillText('Hello, world!', x, y += 20); ctx.fillRect(x - 20, y - 10, 10, 10); }); &lt;/script&gt; &lt;script&gt; $('#view-css').text($('#css').text()); $('#view-script').text($('#script').text()); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload