Анимация спрайтов

const canvas = document.getElementById('field'); 
let ctx = canvas.getContext('2d'); 
 
let sx = 0, 
  tick_count = 0; 
let sprite = new Image(); 
sprite.src = 'https://ratnotes.files.wordpress.com/2013/01/animal-2a.png'; 
sprite.onload = function() { 
  tick(); 
  requestAnimationFrame(tick); //вызов анимации 
}; 
 
function tick() { 
  if (tick_count > 10) { 
    drawCat(); 
    tick_count = 0; 
  } 
  tick_count += 1; 
  requestAnimationFrame(tick); 
} 
 
function drawCat() { 
  ctx.clearRect(0, 0, canvas.width, canvas.height); //очистка канваса 
  sx = (sx === 384 ? 0 : sx + 96); //переброс в начало, если спрайт закончился 384 - width картинки, 384/4 =96 -шаг, на который сдвигаем 
  ctx.drawImage(sprite, sx, 0, 96, 96, 100, 100, 96, 96); //отображение первого спрайта 
}

<canvas id="field" width="900" height="400">hi</canvas>