Assessment for small project involving <canvas> + requestAnimationFrame

MDN
1

According the information learned from chapter Client-side_web_APIs/Drawing_graphics, I created a small project with 4 canvas windows showing the same animation with different sprite rates and movement speed. Also the canvas windows size could be resized according to the browser size. I hope it could be useful for other beginners like me.
And I would like to understand a bug from this project. The canvas window No.3, after reducing the browser size, the sprite will stop updating.
canvas-animation

2

Hi @Nathan_Zhang!

It’s been a long time since I looked at this code , but I do have somewhat of an idea. I think it has to do with this bit:

if (posX3 % 6 === 0) {
  if (sprite3 === 5) {
    sprite3 = 0;
  } else {
    sprite3++;
  }
};

This is the only instance in which the number after the modulo operator is not a multiple of 13, and I’m guessing this is the only instance in which the posX value somehow lands on a value that is not 0, meaning that the sprite will no longer update?