Game Refresh on Javascript Canvas Issue glitchy/flashing, using SetInterval

Question

Need help with Canvas refresh, very glitchy and flashing, and im using setInterval. Dont know how to use requestanimation frame, any help is great

//initiates entire game

function fullLoader() {     

    setInterval(drawPoke, fps);
    setInterval(drawHaunt, fps);
    setInterval(drawChar, fps);
    setInterval(drawDusk, fps);
    setInterval(refresh, 1000/30);
}

function refresh() {

    con.clearRect(0, 0, canvas.width, canvas.height)
}

The function are drawings or png images and are set to relaod at the interval of fps which is set to 30.

SetInterval only executes the functions with a best effort with regards to the every_ms argument. This might mean that your functions are called in different orders. Consider placing all the rendering tasks in one function in the order you need them to render in and call that via setInterval. — John, Nov 09 '17 at 23:21

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Never..ever.. use `setInterval` for animation!

Use requestAnimationFrame as it is synced to the display rate and ensures that changes you make to the DOM (canvas) do not get moved to the display until the display hardware is in between frames.

function fullLoader() {     
    requestAnimationFrame(mainLoop); // get first frame
}

// This mainLoop is called every 1/60th second (if you return in under 1/60th second
// if the render time is loonger than 1/60 then you will have to use
// time to keep the speed at 1/30th second. Search SO for how.
function mainLoop(time){  // time is given by browser, in ms 1/1000 
                          // accurate to 1/1,000,000
    refresh();
    drawPoke();
    drawHaunt();
    drawChar()
    drawDusk();
    requestAnimationFrame(mainLoop); // get next frame
}

function refresh() {
    con.clearRect(0, 0, canvas.width, canvas.height);
}

Thank YOU!!!! Im so new at this kinda stuff and this works perfectly! Much appreciated — Devan, Nov 13 '17 at 04:09

Game Refresh on Javascript Canvas Issue glitchy/flashing, using SetInterval

1 Answers1

Never..ever.. use setInterval for animation!

Never..ever.. use `setInterval` for animation!