Пытаюсь сделать простой таймер для обратного отсчета. Не могу разобраться с setTimeout(). Все равно цифры бегут со страшной скоростью.
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var canvasW=c.width;
var canvasH=c.height;
var starttimer=90;
var color='blue';
//таймер
var timer=function(x,y){
this.x=x;
this.y=y;
//рисование таймера
this.draw=function(){
ctx.font="40px Times New Roman";
ctx.textAlign='center';
ctx.textBaseline="middle";
ctx.fillStyle=color;
ctx.fillText(starttimer,this.x,this.y);
ctx.strokeStyle=color;
ctx.lineWidth=3;
ctx.beginPath();
ctx.arc(canvasW/2,canvasH/2,30,0,Math.PI*2,false);
ctx.stroke();
//изменение таймера
setTimeout(starttimer -=1,1000);
};
};
//конец таймера
var Timer=new timer(canvasW/2,canvasH/2);
function animate(){
ctx.clearRect(0,0,canvasW,canvasH);
ctx.fillStyle="black";
ctx.fillRect(0,0,c.width,c.height);
ctx.fill();
Timer.draw();
requestAnimationFrame(animate);
};
animate();
Как правильно сделать? Пробовал вместо Timeout setInterval - почти тоже самое, нет задержки....