JSFiddle - React, Tailwind, and code Playground

by ehoop1337

HTML

<script src="https://cdn.jsdelivr.net/gh/ehoop1337/sequence-canvas/build/sequence-canvas.js"></script>
<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web - SequenceCanvas</title>
  </head>

  <body>
    <canvas id="example"></canvas>
    <div>
      <button class="start">start</button>
      <button class="pause">pause</button>
      <button class="play">play</button>
      <button class="stop">stop</button>
      <button class="direction">reverse direction</button>
      fps: <input class="fps" type="number" min="1" max="60" value="60" />
      <div class="current">Current image index: <span></span></div>
    </div>
  </body>

</html>

CSS

*,
::before,
::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  color: #000;
}

canvas {
  display: block;
}

body>div {
  display: flex;
  justify-content: center;
  grid-gap: 10px;
  padding: 10px 0;
}

JavaScript

function createPathImage(index) {
  return `https://raw.githubusercontent.com/ehoop1337/sequence-canvas/master/example/images/explosion01-nofire-frame${index.toString().padStart(3, '0')}.webp`;
}
const arrayPathImages = [...new Array(98).fill('').map((_, i) => createPathImage(i + 3))];

const canvas = new SequenceCanvas({
  canvas: {
    element: document.querySelector('canvas#example'),
    width: innerWidth,
    height: innerHeight - 50,
  },
  images: {
    paths: arrayPathImages,
    options: {
      size: {
        width: 400,
        height: 400,
      },
      position: {
        x: innerWidth / 2 - 200,
        y: (innerHeight - 100) / 2 - 200
      }
    }
  }
});
const current = document.querySelector('.current > span');
 canvas.on('render', function() {
    current.textContent = canvas.getCurrentImage();
  });

// Buttons
const startButton = document.querySelector('.start');
const pauseButton = document.querySelector('.pause');
const playButton = document.querySelector('.play');
const stopButton = document.querySelector('.stop');
const directionButton = document.querySelector('.direction');
const fps = document.querySelector('.fps');

startButton.addEventListener('click', () => canvas.start());
pauseButton.addEventListener('click', () => canvas.pause());
playButton.addEventListener('click', () => canvas.play());
stopButton.addEventListener('click', () => canvas.stop());
directionButton.addEventListener('click', () => canvas.setDirection(canvas.getDirection() === 1 ? -1 : 1));
fps.addEventListener('input', function(e) {
  if (!e.target.value.length) return;
  const value = Number(e.target.value);
  if (value > 60) fps.value = 60;
  if (value < 1) fps.value = 1;
  canvas.pause();
  canvas.setFps(value);
  canvas.play();
})