JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
    body{ font-family: monospace; font-size: 20px; text-align: center; }
    #C0 { background:#000000; color:#FFFFFF; }
    #C1 { background:#8F0000; color:#ffffff; }
    #C2 { background:#008F00; color:#ffffff; }
    #C3 { background:#00008F; color:#FFFFFF; }
    #IN { size:6; type:"text"; }
    input { size:6; type:"text"; }
</style>
</head>
<body>
  <b>Editor</b>
  <br><br>
  <!-- <p><canvas id="icon" width=16 height=16/></p> -->
  <table align=center>
      <tr style="vertical-align:top">
          <td><canvas id="icon" width=32 height=32/></td>
          <td width=4/>
          <td><canvas id="grid" width=256 height=256/></td>
          <td width=8/>
          <td>
              <table>
              <tr id="RW"><td width=80>Width</td><td width=8/><td id="W#">1</td></tr>
              <tr id="RH"><td >Height</td><td/><td id="H#">1</td></tr>
              <tr height=16/>
              <tr><td id="C0">0</td><td/><td><input id="E0" size=6/></td></tr>
              <tr><td id="C1">1</td><td/><td><input id="E1" size=6/></td></tr>
              <tr><td id="C2">2</td><td/><td><input id="E2" size=6/></td></tr>
              <tr><td id="C3">3</td><td/><td><input id="E3" size=6/></td></tr>
              <tr><td>
                  <FORM NAME="myform" ACTION="" METHOD="GET">
                  <INPUT id="MyButton" TYPE="button" Value=" Toggle Sprite ">
                  </FORM>    
              </td></tr>
              </table>
          </td>
      </tr>
  </table>
  <p><div id="text"></div></p>
</body>
</html>

JavaScript

var W = 8; // view size in pixels
var H = 8;
var r = 0;
var SZ = (256/W);
var MAX = 32; // 8,16,32

var grid = [];

function $(id) { return document.getElementById(id); }    

var text = $('text');

var canvas = $('grid');
var context = canvas.getContext('2d');

var showSprite = false;
var Palette = [ [0,0,0], [255,0,0], [0,255,0], [0,0,255] ];
var plotColor = 0; // index into palette

var theSprite = new Image();
    
var Colors = [ $('C0'),$('C1'),$('C2'),$('C3') ];
var Edits = [$('E0'),$('E1'),$('E2'),$('E3')]

function GetColor(i)
{
    var c = Palette[i&3];
    return "#"+
        (c[0]<16?"0":"")+c[0].toString(16)+
        (c[1]<16?"0":"")+c[1].toString(16)+
        (c[2]<16?"0":"")+c[2].toString(16);
}

function ToGrid(i,j)
{
    return i+j*MAX; // returns grid index
}

function Plot(event)
{
    var i = event.offsetX / SZ;
    var j = event.offsetY / SZ;
    var x = Math.floor(i);
    var y = Math.floor(j);
    //text.innerHTML = x+","+y;
    if (x >= 0 && x < W && y >= 0 && y < H)
    {
        var n=ToGrid(x,y);
        if (grid[n] != plotColor)
        {
            grid[n] = plotColor;
            UpdateIcon();
            Draw();
        }
    }
}

var isDown = false;

canvas.onmousedown = function(event)
{
    // event.x and .pageX are absolute positions
    // event.offsetX is relative to clicked element!
    Plot(event);
    isDown = true;
}
canvas.onmouseup = function(event)
{
    isDown = false;
}    
canvas.onmousemove = function(event)
{
   // Todo: unable to detect mouseup outside of canvas?
   if (isDown)Plot(event);
}
canvas.onmouseover = function(event)
{
    // Try to detect off-canvas mouseup... may not work on all browsers.
    if (!event.button) isDown=false;
}
    
function setColor(index)
{
    plotColor = index&3;
    for (var i=0; i<4; i++)
    {
        Colors[i].innerHTML = i==index?("("+i+")"):i;
    }
}

Colors[0].onmousedown = function(event) { setColor(0); }
Colors[1].onmousedown = function(event) { setColor(1);...