JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
    body{ font-family: monospace; font-size: 20px; text-align: center; }
    #C0 { background-color:#000000; color:#FFFFFF; }
    #C1 { background-color:#FF0000; color:#ffffff; }
    #C2 { background-color:#00FF00; color:#ffffff; }
    #C3 { background-color:#0000FF; color:#FFFFFF; }
</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><canvas id="grid" width=256 height=256/></td>
          <td width=8/>
          <td>
              <table>
              <tr><td id="WW" width=64>Width</td><td id="W#">16</td></tr>
              <tr><td id="HH" width=64>Height</td><td id="H#">16</td></tr>
              <tr height=16/>
              <tr><td id="C0" bgcolor="#000000" width=64>0</td><td>FF4040</td></tr>
              <tr><td id="C1" bgcolor="#ff0000" width=64>1</td></tr>
              <tr><td id="C2" bgcolor="#00ff00" width=64>2</td></tr>
              <tr><td id="C3" bgcolor="#0000ff" width=64>3</td></tr>
              </table>
          </td>
      </tr>
  </table>
  
  <p><div id="text"></div></p>
  <FORM NAME="myform" ACTION="" METHOD="GET">
  <br>Color RGB palette:<br>
  #0<INPUT TYPE="text" NAME="Color1" VALUE="000000"><P>
  #1<INPUT TYPE="text" NAME="Color2" VALUE="FF0000"><P>
  #2<INPUT TYPE="text" NAME="Color3" VALUE="00FF00"><P>
  #3<INPUT TYPE="text" NAME="Color4" VALUE="0000FF"><P>
  <INPUT id="MyButton" TYPE="button" NAME="button" Value="Toggle Sprite" width=128 onClick="toggleSprite()">
  </FORM>    
</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

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)
{
   if (isDown)Plot(event);
}

function setColor(i)
{
    plotColor = i&3;
    $('C0').innerHTML = i==0?"(0)":"0";
    $('C1').innerHTML = i==1?"(1)":"1";
    $('C2').innerHTML = i==2?"(2)":"2";
    $('C3').innerHTML = i==3?"(3)":"3";
    //text.innerHTML = "Color="+plotColor;
}

var theSprite = new Image();
    
/*
function MakeImage()
{
    UpdateIcon();
    var image = theSprite;//new Image();
    image.src = $('icon').toDataURL();
    return image;
}
*/
    
   
$('C0').onmousedown = function(event)
{
    setColor(0);
    Draw();
}
$('C1').onmousedown = function(event)
{
    setColor(1);
}
$('C2').onmousedown = function(event)
{
   ...