TypeScript

by Manawe

HTML

<canvas id="myCanvas" />
<img id="scream" src="https://data.mo.ee/sheet/ground2.gif?49044b6174857a39a06f0167070383derpg.mo.ee">1

CSS

canvas {
  width: 100%;
}

TypeScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = document.getElementById("scream");
var IMAGE_HEIGHT = 34;
var IMAGE_WIDTH = 54;
var OFFSET_IMAGE_Y = 14;
var OFFSET_IMAGE_X = 27;
/* ctx.drawImage(img,0,5*0,IMAGE_WIDTH,IMAGE_HEIGHT,0,0,IMAGE_WIDTH,IMAGE_HEIGHT);
ctx.drawImage(img,0,5*0,IMAGE_WIDTH,IMAGE_HEIGHT, OFFSET_IMAGE_X,OFFSET_IMAGE_Y,IMAGE_WIDTH,IMAGE_HEIGHT); */

function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min)
}


for (let i = 100; i>= 0; i--) {
  for (let j = 0; j <= 100 ; j++) {
  var rndInt = randomIntFromInterval(0, 7)
  var rndInt = randomIntFromInterval(0, 7)

ctx.drawImage(img,0,rndInt*IMAGE_HEIGHT,IMAGE_WIDTH,IMAGE_HEIGHT,
OFFSET_IMAGE_X * 2 *i +OFFSET_IMAGE_X * j ,OFFSET_IMAGE_Y * j,IMAGE_WIDTH,IMAGE_HEIGHT);
  }
}