<canvas id="myCanvas"></canvas>
body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

canvas {
     border: 3px solid black;
 }
View Compiled
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;

let img = new Image();
img.src = 'https://i.ibb.co/tmdzwtT/dog.jpg';
img.addEventListener('load', () => {
    requestAnimationFrame(loop)
})

let lr= 150;
let frameCounter = 0;
let rX = 0

let framesPerSecond = 10;

let loop = () => {
  setTimeout( () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    rX = lr * frameCounter;
    ctx.drawImage(img, rX, 0, lr, 200, 225, 100, 150, 200);

    frameCounter < 3 ? frameCounter++ : frameCounter = 0;
    requestAnimationFrame(loop)
  }, 1000 / framesPerSecond);
  
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.