Drawing text to <canvas> with @font-face does not work at the first time
Posted
by lemonedo
on Stack Overflow
See other posts from Stack Overflow
or by lemonedo
Published on 2010-05-03T07:01:05Z
Indexed on
2010/05/03
7:08 UTC
Read the original article
Hit count: 297
Hi all,
First try the test case please: http://lemon-factory.net/test/font-face-and-canvas.html
I'm not good at English, so I made the test case to be self-explanatory.
On the first click to the DRAW button, it will not draw text, or will draw with an incorrect typeface instead of the specified "PressStart", according to your browser. After then it works as expected.
At the first time the text does not appear correctly in all browsers I've tested (Firefox, Google Chrome, Safari, Opera).
Is it the standard behavior or something?
Thank you.
PS: Following is the code of the test case
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>@font-face and canvas</title>
<style>
@font-face {
font-family: 'PressStart';
src: url('http://lemon-factory.net/css/fonts/prstart.ttf');
}
canvas, pre {
border: 1px solid #666;
}
pre {
float: left;
margin: .5em;
padding: .5em;
}
</style>
</head>
<body>
<div>
<canvas id=canvas width=250 height=250>
Your browser does not support the CANVAS element.
Try the latest Firefox, Google Chrome, Safari or Opera.
</canvas>
<button>DRAW</button>
</div>
<pre id=style></pre>
<pre id=script></pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var x = 30
var y = 10
function draw() {
ctx.font = '12px PressStart'
ctx.fillStyle = '#000'
ctx.fillText('Hello, world!', x, y += 20)
ctx.fillRect(x - 20, y - 10, 10, 10)
}
$('button').click(draw)
$('pre#style').text($('style').text())
$('pre#script').text($('script').text())
</script>
</body>
</html>
© Stack Overflow or respective owner
