10352

HTML5 Canvas DrawImage Stutter / Choppiness

Question:

<strong>PROBLEM</strong>

I am trying to get an image on a canvas to move from left to right smoothly. It's not too bad on Chrome/Safari (still stutters a little), but there is noticeable stutter in Firefox on multiple machines (tried on Windows and Mac). I'm a bit stumped as to how to solve this.

<strong>WHAT I TRIED</strong>

I am using requestAnimationFrame instead of setTimeout. I am using clearRect instead of setting the canvas width, though I am clearing the entire canvas instead of the minimum bounding box as I wanted to test it in the worst case scenario. I did close extra tabs. I even disabled Firebug. I am using drawImage instead of the image data functions. Since I'm not doing anything else but clearRect and drawImage, I avoided using an offscreen canvas.

<strong>EXAMPLE 1:</strong> <a href="http://jsfiddle.net/QkvYs/" rel="nofollow">http://jsfiddle.net/QkvYs/</a>

This one has a set framerate where it ensures that the position is correct regardless of how often the game loop runs. It displays the number of frames skipped. This example is closer to what I'm aiming for. Note that it looks choppy even when no frames are being skipped. I have also played around with the framerate with no success, though I'd like to aim for about 30 fps (var frameRate = 33;).

<strong>EXAMPLE 2:</strong> <a href="http://jsfiddle.net/R8sEV/" rel="nofollow">http://jsfiddle.net/R8sEV/</a>

Here is a simple one where all it does is move the image. This stutters for me on multiple machines.

//loop function loop() { //request anim frame requestAnimationFrame(loop); //set canvas once able if (!canvas) { var temp = document.getElementById("testCanvas"); if (temp) { canvas = temp; ctx = canvas.getContext('2d'); } } //update and render if able if (canvas) { //increase x x += 5; //start from beginning if (x > canvas.width) { x = 0; } //clear ctx.clearRect(0, 0, canvas.width, canvas.height); //image ctx.drawImage(image, x, 200); } } //start loop();

<strong>WHAT I LOOKED AT</strong>

I realize that this question has been asked before and I did look before asking. However, the answers given have unfortunately not helped.

<ul><li>

<a href="https://gamedev.stackexchange.com/questions/37298/slow-firefox-javascript-canvas-performance" rel="nofollow">https://gamedev.stackexchange.com/questions/37298/slow-firefox-javascript-canvas-performance</a>

</li> <li>

<a href="https://stackoverflow.com/questions/9944961/html5-canvas-animation-has-occasional-jitter-hesitation-stutter" rel="nofollow">HTML5 Canvas Animation Has Occasional Jitter / Hesitation / Stutter</a>

</li> <li>

<a href="https://stackoverflow.com/questions/14198233/canvas-animation-stutters-in-firefox-but-is-perfect-in-chrome" rel="nofollow">Canvas animation stutters in FireFox but is perfect in Chrome</a>

</li> <li>

<a href="https://stackoverflow.com/questions/6513940/is-there-a-solution-for-html5-canvas-animation-stutter" rel="nofollow">Is there a solution for HTML5 canvas animation stutter?</a>

</li> </ul>

Thanks for the help! I appreciate it.

Answer1:

For instance use time delta in your position calculations. This will ensure that object is moved by certain value in given time regardless of FPS and delay between frames.

Edited your fiddle: <a href="http://jsfiddle.net/R8sEV/2/" rel="nofollow">http://jsfiddle.net/R8sEV/2/</a>

wrong approach:

x += 5

good approach:

x += speed * delta / 1000

where delta is time in [ms] which passed from last frame - and speed is measured in [pixels/second]

Recommend

  • Merge videos and images using ffmpeg
  • How to merge two FBOs?
  • ActionScript: Adding multiple instances of the same swf file to the stage
  • Feeding gstreamer fdsrc via STDIN only produces fraction of expected result
  • How to check if an NSWindow is open
  • Bash: sort find results using part of a filename [duplicate]
  • Interrupting a thread in Java
  • Access denied while saving image in UWP.Access is denied. (Exception from HRESULT: 0x80070005 (E_ACC
  • Flicker when custom drawing on a double buffered TTreeView
  • Is a NULL pointer's dereference also equals NULL?
  • Class implementation in a header file == bad style? [duplicate]
  • Why is OpenID Connect considered mobile friendly compared to SAML
  • CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE
  • How to wait for all async tasks to finish in Node.js?
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Parenthesis() and SQL Query Performance
  • in batch how do i use taskkill properly
  • Cross platform UI spacing/padding
  • cell spacing in div table
  • Hash Code in SQL Server?
  • jQuery: add elements until a particular height is reached
  • Reduction and collapse clauses in OMP have some confusing points
  • How to clear text inside text field when radio button is select
  • Projection media query: browser support and workarounds?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Get object from AWS S3 as a stream
  • Cross-Platform Protobuf Serialization
  • Validaiting emails with Net.Mail MailAddress
  • Statically linking a C++ library to a C# process using CLI or any other way
  • Do I've to free mysql result after storing it?
  • Why winpcap requires both .lib and .dll to run?
  • R: gsub and capture
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • Turn off referential integrity in Derby? is it possible?
  • Qt: Run a script BEFORE make
  • JaxB to read class hierarchy
  • reshape alternating columns in less time and using less memory