JSFiddle - React, Tailwind, and code Playground

by rga4

HTML

<canvas id="ctop" width="320" height="320" style="position: absolute; left: 10px; top: 100px; z-index: 3;"></canvas>

<canvas id="cgrid" width="320" height="320" style="position: absolute; left: 10px; top: 100px; z-index: 2;"></canvas>

<canvas id="cimg" width="320" height="320" style="position: absolute; left: 10px; top: 100px; z-index: 1;"></canvas>

<span>Selected: </span><span id="info">none</span><br>

<button id="saveButton" name="save" style="display: none;">Save image</button>
<label class="button" for="saveButton">Save image</label>
<input type="file" id="loadButton" multiple accept="image/*" onchange="loadFiles(this.files)" style="display: none;">
<label class="button" for="loadButton">Load image</label>
<div>
<input type="text" id="tileSize" maxlength="3" size="5" value="16" />
<button id="setTileSize" style="display: none;"></button><label class="button" for="setTileSize">Set tile size</label>
</div>

CSS

.button {
  display: inline-block;
  padding: 3px;
  background: #ccc;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.button:hover {
  background: #ddd;
}

JavaScript

info = document.getElementById("info");