HTML5 Canvas, 2nd Edition

Creating a Timer Loop

As it currently stands, our code will be called only a single time. Let’s create a simple timer loop that will call the drawScreen() function 10 times a second, or once every 100 milliseconds. A timer loop that is set to run at a certain frame rate is sometimes referred to as a frame tick or timer tick. Each tick is simply a single iteration of the timer running all the code that we put into our drawScreen() function. We will also need a function that starts the timer loop and initiates the tick after the image has preloaded properly. We’ll name this function startUp():

function eventShipLoaded() {
   startUp();
}
function startUp(){
   gameLoop();
}

function gameLoop() {
    window.setTimeout(gameLoop, 100);
    drawScreen();
}