Search the Community

Do you want custom FPS with smooth animations? I have made a method that makes this possible. The first 1-3 seconds may be buggy, but after that it works smooth. The update() method is called (custom FPS) times per second. The draw() method is called how many times the browser refreshes per second. Here's the code: (mainCanvas is a canvas with the size 800,600) window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ) { window.setTimeout(callback, Math.floor(1000 / 60)); };function step(){ for (var i = 0; i < updates.length; i++) { if (updates[i] == tick) { utick++; update(); } } tick++; var cursec = (new Date()).getSeconds(); if (cursec != prevsec) { prevsec = cursec; frametime = tick; tick = 0; uframetime = utick; utick = 0; updates = []; for (var i = 0; i < fps; i++) { var uind = Math.ceil(frametime / fps * i); if (uind >= frametime) { uind = frametime - 1; } updates[i] = uind; } } draw(); requestAnimFrame(step);}function update(){}function draw(){ ctx.clearRect(0, 0, 799, 599); ctx.fillText(uframetime.toString(), 10, 20);}var mainCanvas = document.getElementById("mainCanvas");var ctx = mainCanvas.getContext("2d");var fps = 30;var prevsec = (new Date()).getSeconds();var tick = 0;var frametime = 0;var utick = 0;var uframetime = 0;var updates = [];ctx.font="20px Georgia";step();