Canvas fillText performance, is it my code or a problem with WebKit?

I'm implementing some basic animations in canvas, when I came across an interesting issue. It appears that Firefox is rendering my text much more smoothly when animated, then the Chrome or WebKit nightlies. Is this a problem with my code or is there a performance issue with fillText in Webkit/Chrome?

edit I forgot to mention in my actual code, Canvas/Webkit seems to pull a better fps.

Here is a sample test case:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Poor Text Performance Test</title>
<script type="text/javascript">
function run(){
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var dt, prevTime, gameTime, fontSize = 0;

 ctx.fillStyle = "black";
 ctx.textAlign = "center";
 canvas.style.border = "1px solid #666";

 setInterval(function(){
  if(prevTime === undefined)
   prevTime = new Date();

  dt = (new Date().getTime() - prevTime.getTime())/1000;
  prevTime = new Date();

  ctx.clearRect(0,0,canvas.width, canvas.height);

  fontSize += 10*dt;
  ctx.font = fontSize + "pt sans-serif";

  ctx.fillText("Zoom Text", canvas.width / 2, canvas.height / 2);

 }, 1);
}
</script>
</head>
<body onload="run()">
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>

ansaurus

tags:

views:

answers:

Canvas fillText performance, is it my code or a problem with WebKit?

related questions