HTML5 Canvas game optimization

Question

The following is an example code I wrote just to show I handle certain things on my game:

https://jsfiddle.net/qk7ayx7n/25/

<canvas id = "canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

JS:

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width = 750; //keeping ratio
canvas.height = 587; //keeping ratio

$('#canvas').css("height", window.innerHeight);
$('#canvas').css("width",  window.innerHeight * 1.277); //keeping the ratio
//and also resizing according to the window(not to overflow)

var board = new Image();
board.src = "https://s21.postimg.org/ko999yaaf/circ.png";
var circle = new Image();
circle.src = "https://s21.postimg.org/4zigxdh7r/circ.png";
ctx.drawImage(board, 0, 0);

var x = 10, y = 10;
ctx.drawImage(circle, x, y);
startMoving();

function startMoving(){
      if(y > 310) return;
    y+=3;
    ctx.clearRect(0,0,750,587);
    ctx.drawImage(board, 0, 0);
      ctx.drawImage(circle, x, y);
    setTimeout(function(){startMoving()}, 30);
}

A little explanation: This is a simple board game. first the canvas is set to the board dimensions themselves in order to get the coordinates X Y correctly(this is not useful here but in my actual game yes).

then it is resized according to the window of the player, with regards to the actual ratio of the original board image. keeping the ratio is important for the quality of the image. Now the movement is done with a simple timer in a function, once it gets to a certain X and Y the movement is stopped.

I have trouble getting the movement of the circle to move without breaks/lags in some browsers and devices (like on an cordova app), though it works fine usually. I know that the lags are caused by the way I handle things, but why? also, I have trouble keeping the speed of the movement constant - +3 doesn't seem to move the same in every browser.

Answer 1

In most cases, you should use requestAnimationFrame for JavaScript-based animations to avoid choppiness. With this technique, the position is a function of time not how many execution frames take place. This way, fast computers will have more animation frames than slow computers, but you'll still perceive the same animation velocity. For example:

var x = 10, y = 10;

var startPos = 10;
var destPos = 310;
var startTime = Date.now();
var velocity = 0.1; // pixels per millisecond
var distance = destPos - startPos;
var duration = Math.abs(distance) / velocity;

requestAnimationFrame(startMoving);

function startMoving(now) {
  var elapsedTime = Math.min(now - startTime, duration);
  y = startPos + (elapsedTime * velocity);
  ctx.clearRect(0,0,750,587);
  ctx.drawImage(board, 0, 0);
  ctx.drawImage(circle, x, y);

  if (elapsedTime < duration)
    requestAnimationFrame(startMoving);
}