HTML5 Canvas game optimization

Question

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

<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.

Perhaps look into requestAnimationFrame(), insead of using setTimeout() — Jeff McCloud
– Jeff McCloud, Commented Nov 22, 2016 at 0:39
Look here for how to throttle (60 frames per second is good goal): stackoverflow.com/questions/19764018/… and here's a random non-throttled jsFiddle I found that uses canvas, but use your code of course: jsfiddle.net/0q4yLyma — Jeff McCloud
– Jeff McCloud, Commented Nov 22, 2016 at 0:59
Not related to your issue, but don't forget to preload your images before doing anything to it. — Kaiido
– Kaiido, Commented Nov 22, 2016 at 1:30

Jacob · Accepted Answer · 2016-11-22 16:35:50Z

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);
}

edited Nov 22, 2016 at 16:35

answered Nov 22, 2016 at 1:09

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user1938653 Over a year ago

Maybe I am wrong, but if I need the image to travel a certain distance and the duration is over, because of slow browser, the image would simply teleport there instead of completing it's route, no?

Jacob Over a year ago

Yep, that's right. In other words, you set how long or how fast you want the animation to be. If the computer is only fast enough to do 1 animation frame, that's all you'll see. Pretty unlikely, though.

user1938653 Over a year ago

Well that might be a problem, as I need the player to actually see his movement to the new location. I don't mind him having bigger jumps though, each jump is an x pixels moved and slow browser will have less jumps. is it possible?

Jacob Over a year ago

That's exactly what this code does. Teleporting would just be the case of an extremely slow browser, where it's just one jump. I wouldn't get hung up on that edge condition.

user1938653 Over a year ago

As I am too tired to try to integrate it with my real code(it's huge) I will simply let you know tomorrow, thanks nonetheless!

|

Collectives™ on Stack Overflow

HTML5 Canvas game optimization

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related