Why doesnt this simple canvas-rotation animation work?

[kingoslo]

Hello there,

I want to make a tachometer. It should constantly make ajax requests and change the position of the needle depending on the information it gets from the script.

I reckon I need some kind of endless loop, that repeats the step over and over again. However, I read somewhere that I cannot place canvas animations inside loops.

This is the code. Using jQuery, how would I solve the above problem? Your code doesn't have to be correct, I just need to get the idea of how to do it.:

var context;
var meter;
var pin;

function init() {
 meter = new Image();
 pin = new Image();
 context = document.getElementById('canvas').getContext('2d');
 meter.src = 'background.png'; //meter backgroxund image
 pin.src = 'needle.png'; //meter pin image
 context.drawImage(meter,0,0); //drawing meter background 
 context.translate(275,297); //drawing meter
 context.save();
 setTimeout(startup,500);
}

function startup() {
 var r=2;  //handle here    
 var i=r*36-27; //angle of rotation from value of r and span
 var angleInRadians = 3.14159265 * i/180; //converting degree to radian  
 context.rotate(angleInRadians); //rotating by angle
 context.drawImage(pin,-250,-3); //adjusting pin center at meter center
 context.restore();
}

Thanks.

Kind regards,
Marius

[daveVk]

function startup() {
$.ajax({ url: "test.html", success: function(){

var r=... from reply ..; //
var i=r*36-27; //angle of rotation from value of r and span
var angleInRadians = 3.14159265 * i/180; //converting degree to radian
context.rotate(angleInRadians); //rotating by angle
context.drawImage(pin,-250,-3); //adjusting pin center at meter center
context.restore();
setTimeout(startup,500); // reflesh at 500 + server response time

}});