JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<canvas></canvas>
<img id="source"
       src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
       width="300" height="227" style="display:none;">

JavaScript

var sprite = document.getElementById('source');
var width = 600,
  height = 600,
  cvs = document.getElementsByTagName('canvas')[0],
  ctx = cvs.getContext('2d');
cvs.width = width;
cvs.height = height;

const menu = {
  animation: [{
      sX: 27,
      sY: 295
    },
    {
      sX: 27,
      sY: 399
    },
  ],
  x: cvs.width / 2 - 118 / 2,
  y: 100,
  w: 118,
  h: 84,

  frame: 0,
  frames: 0,

  // Animator
  update: function() {
    // Incrementation % incrementation period (speed)
    this.frame += this.frames % 5 == 0 ? 1 : 0;
    // Iteration of animation--draws 0 then 1 then 0....       
    this.frame = this.frame % this.animation.length;

		this.draw();
    window.setTimeout(function() {
      menu.update();
    }, 200);
  },

  draw: function() {
    let animCounter = this.animation[this.frame];
    console.log(animCounter);

    //if (status.current == status.Start) {

      ctx.drawImage(sprite, animCounter.sX, animCounter.sY);
    //}
  }

}
menu.update();