<canvas id="canvas" width="79px" height="80px"></canvas>
    canvas {
      /* background: grey; */
/*       border: 1px solid grey; */
    }
 (function () {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // Usagyun variables
      const USAGYUN_WIDTH = 79;
      const USAGYUN_HEIGHT = 80;

      const usagyuun = new Image();
      usagyuun.src = 'https://scontent.fhan2-1.fna.fbcdn.net/v/t39.1997-6/s851x315/56348823_2379835892041148_1253302075794653184_n.png?_nc_cat=106&_nc_oc=AQnTtRi40UFTIK6NNdS9Ar-g05YJGfwS0XK8z5Ghwjag7P-ktmfpf_NtKoR-caM-uWA&_nc_ht=scontent.fhan2-1.fna&oh=b43a798e53eeb8b05b4acf08c3233517&oe=5DFF706C';
      usagyuun.onload = () => {
        ctx.drawImage(
          // Image
          usagyuun,
          // Selection
          0, // sx
          USAGYUN_HEIGHT * 2, // sy
          USAGYUN_WIDTH, // sWidth
          USAGYUN_HEIGHT, // sHeight
          // Drawing
          0, // dx
          0, // dy
          USAGYUN_WIDTH, // dWidth
          USAGYUN_HEIGHT // dHeight
        );
      };

      let currentFrame = 0;

      const update = () => {
        ctx.clearRect(0, 0, 80, 79);
        ctx.drawImage(
          // Image
          usagyuun,
          // Selection
          (USAGYUN_WIDTH * (Math.floor(currentFrame) % 8)),
          USAGYUN_HEIGHT * 2, // sy
          USAGYUN_WIDTH, // sWidth
          USAGYUN_HEIGHT, // sHeight
          // Drawing
          0, // dx
          0, // dy
          USAGYUN_WIDTH, // dWidth
          USAGYUN_HEIGHT // dHeight
        );


        currentFrame += 0.2;
        requestAnimationFrame(update);
      };
      update();

    })();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.