JSFiddle - React, Tailwind, and code Playground

by abhihshekai

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
test
<canvas id="canvas"></canvas>
<br>
<input id="my-input" type="range" min="1" max="72" value="1" />

CSS

canvas {
	 position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	  width: 100%;
	  border: 1px solid black;
		cursor: grab;
	}

	
	#my-input{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		top: 0;
		bottom: 0;
		z-index: 50;
		opacity: 0;
		cursor: grabbing;
	}

JavaScript

var canvas = document.getElementById("canvas");
canvas.height = 1080;
canvas.width = 1920;

var totalImages = 72;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  var videoFrame = new Image;
 var videoFrameUrl = 'https://rphv.net/walkthrough/tmp-' + i + '.gif';	
 //var videoFrameUrl = 'video/layer/slap' + i + '.png';	
  videoFrame.src = videoFrameUrl;
  videoFrames.push(videoFrame);
}
	
//alert(videoFrameUrl);
$("#my-input").on("input", function(event) {
  var currentImage = videoFrames[event.target.value - 1];
  var context = canvas.getContext("2d");
  context.drawImage(currentImage, 0, 0);
});