In html5/canvas the below code (I just gave a snippet of working code) animates a few images based on time. Something like a Flash animation where at certain times images start to move at certain times or frame count. My question is , is there a better way to do this ? I know I can use something other than setInterval . I am calculating the elapsed time and setting off images based on the time interval.


Code:
function doGameLoop() {
		
        ctx.clearRect(0,0,600,400);
		now = new Date();
     
        totalSeconds = (now - start) / 1000;
        last = now;
		
		ctx.fillText("totalSeconds=" +totalSeconds ,10,100);
		if (totalSeconds>2 && totalSeconds<6)
		{
			img2.m_draw(130);
		}
		if (totalSeconds>4 && totalSeconds<8)
		{
			img3.m_draw2(230);
		}
		
		if (totalSeconds>10){
			start = new Date();//start again
			
		}
		img.m_draw(30);
      //  fi++;
     }



	var img= new ClassLoadImages(30,30);
	var img2= new ClassLoadImages(30,30);
	var img3= new ClassLoadImages(30,30);
    </script>