Canvas Animation Duration In Time

When in HTML canvas we want that the fps will be dynamic and don't let the user device crash we are using requestAnimationFrame() but who I keep the fps of the canvas animation dyn

Solution 1:

The idea is to calculate the amount of milliseconds in between frames, divide it by 1000, then multiply the result with a speed stated in pixels per second.

Here's example code that uses the timing parameter passed to requestAnimationFrame:

var $square;
var x = 0;
var speed = 100; // pixels per second

var prevTime; // start as undefined to prevent jumping

function tick(now) {
  // schedule next tick
  requestAnimationFrame(tick);
  // calculate factor
  delta = (now - prevTime) / 1000;
  prevTime = now;
  if (isNaN(delta)) return; // skip very first delta to prevent jumping

  x += speed * delta;
  $square.css({
    left: x
  });
}

$(document).ready(function () {
  $square = $("#square");
  requestAnimationFrame(tick);
});

body {
  margin: 15px;
  border: 1px solid black;
  width: 500px;
  position: relative;
  line-height: 30px;
}

#square {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
500 pixels in five seconds
<div id="square"></div>

Solution 2:

You should calculate the delta time (time in milliseconds between each frame). This can be done as @Chris G has done. If you want to easely get the delta time between frames and draw a moving object on the canvas, the easiest way would be to use a library such as Canvas.js:

const canvas = new Canvas('my-canvas', 500, 500);

canvas.on('start', function ( ctx, handyObject ) {

  handyObject.Ball = {
    x: 10,
    y: 10,
    speed: 100 // Pixels per second
  };
  
});

canvas.on('update', function (handyObject, delta) {

  handyObject.Ball.x += handyObject.Ball.speed * delta; // The magic happens. The speed is multiplied with the delta which often is around 0.016. Delta time is the time since the ball was last updated. Using delta time will make sure the ball moves exactly the same no matter what framerate the client is running.
  
});

canvas.on('draw', function (ctx, handyObject, delta) {

  ctx.clear();

  ctx.beginPath();
  
  ctx.arc(handyObject.Ball.x, handyObject.Ball.y, 10, 0, 2 * Math.PI);
  
  ctx.fill();
  
});

canvas.start();

<script src="https://gustavgenberg.github.io/handy-front-end/Canvas.js"></script>