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>
  <p>
      <canvas id="display" width=256 height=256/>
  </p>
  <table width=256 align=center><tr>
      <td id="C0" bgcolor="#000000" width=64>0</td>
      <td id="C1" bgcolor="#ff0000" width=64>1</td>
      <td id="C2" bgcolor="#00ff00" width=64>2</td>
      <td id="C3" bgcolor="#0000ff" width=64>3</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 grid = [];

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

var text = $('text');

var canvas = $('display');
var context = canvas.getContext('2d');
//context.fillRect(0,0,256,256);

var palette = [ [0,0,0], [255,0,0], [0,255,0], [0,0,255] ];
//var palette = ["#101010","#F01010","#10F010","#1010F0"];

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);
}

var plotColor = 0;

canvas.onmousedown = function(event)
{
    var i = (event.x-canvas.offsetLeft) / SZ;
    var j = (event.y-canvas.offsetTop) / SZ;
    var k = [i,j];
    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=x+y*W;
        var g = grid[n] ? grid[n]:0;
        g = (g+1)&3;
        grid[n] = plotColor;
        text.innerHTML += " => " + g;
        Draw();
        DrawIcon();
    }
}

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;
}

function DrawIcon()
{
    var c = $('icon');
    var g = c.getContext('2d');
    g.fillStyle = "#202020";
    g.fillRect(0,0,16,16);
    var d = g.getImageData(0,0,16,16);
    for (var j=0; j<H; j++)
    {
        for (var i=0; i<W; i++)
        {
            var b = i*4 + (j*16*4);
            var c = palette[grid[i+j*W] & 3];
            d.data[b+0] = c[0];
            d.data[b+1] = c[1];
            d.data[b+2] = c[2];
            //d.data[b+3] = 255;
        }
    }
    g.putImageData(d,0,0);
    var url = c.toDataURL();
    $('text').innerHTML = canvas.toString();
}
    
$('C0').onmousedown = function(event)
{
   ...