Drawing text to <canvas> with @font-face does not work at the first time
- by lemonedo
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>
