Note that there are some explanatory texts on larger screens.

plurals
  1. PORequestAnimationFrame call time changes depending on my canvas size
    primarykey
    data
    text
    <p>On my application, I have a canvas which CSS size (CSS, not html) updates depending on the window size.</p> <p>I have a main gameplayLoop which looks like this :</p> <pre><code>run = function(){ console.log(timerDiff(frameTime)); game.inputManage(); game.logics(); game.graphics.animate(); game.graphics.render(); frameTime = timerInit(); requestAnimFrame(run); } </code></pre> <p>My requestAnimFrame function is the one from Paul Irish :</p> <pre><code>window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); </code></pre> <p>So basically the problem is that the timer that I log which measures the time between the requestAnimFrame call and the effective function call totally changes. If my browser is in fullscreen I get like 50/60 ms, and if I have a small window I can get to something like 10 ms.</p> <p>As the requestAnimFrame call is supposed to call constantly the function under a 60fps rythm (which is something like 30 ms I think) I shouldn't have this kind of result, since there is basically nothing happening between the timer's creation and its check, except the requestAnimFrame</p> <p>I also have some recurring micro-freezes (less than a second) which happens like every 2/3 seconds. But the timer doesn't detect any change in the time (like even the time counter of javascript is blocked)</p> <p>My timers functions are like this but it doesn't really matter here</p> <pre><code>timerInit = function() { return new Date(); } timerDiff = function(datePrev) { return new Date().getTime() - datePrev.getTime(); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload