JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<img src=http://i.imgur.com/UOcKU33.png id=iconsource>
<canvas id=iconcanvas width=200 height=200>

CSS

canvas#iconcanvas {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  border: 20px solid blue;
  background-color: black;
}
img#iconsource {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9;
}

JavaScript

var ctx = iconcanvas.getContext('2d');

var icons = {
  1: {'x': 20,'y':-5},
  2: {'x': 220,'y':-5},
  3: {'x': 420,'y':-5},
  4: {'x': 20,'y':190},
  5: {'x': 220,'y':190},
  6: {'x': 420,'y':190},
  7: {'x': 20,'y':385},
  8: {'x': 220,'y':385},
  9: {'x': 420,'y':385},
};

function showIcon(x) {
	ctx.drawImage(i, icons[x]['x'],icons[x]['y'],200,200,0,0,200,200);
}

showIcon(3);