With HTML5 canvas and its built-in ability to rotate text, I came across (i.e. learned the hard way) about the limitations of bitmap fonts, such as MS Sans Serif, in XP. XP has trouble rotating bitmap fonts at small point sizes, while Windows 7 does not. So the following HTML5 canvas code works in Windows 7 & Firefox but fails under XP & Firefox:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(100,100);
ctx.font = "9px MS Sans Serif";
ctx.rotate(-Math.PI/2);
ctx.fillText("TEST", 10, 10);
}
</script>
</head>
<body>
<canvas id="canvas" width=800 height=500 />
</body>
</html>
Switching to a TrueType font such as Arial solves the problem. So the lesson is to avoid bitmap fonts such as MS Sans Serif when using HTML5 Canvas.This change in font handling for Windows 7 is probably related to Microsoft's revamping of font scaling to deal with high-resolution netbooks with tiny screens.
No comments:
Post a Comment