JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id='a1hgj' width='64' height='64'></canvas>

CSS

canvas {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: pixelated;
    interpolation-mode: nearest-neighbor;
    border: 5px solid #ddd;
    
}
canvas#a1hgj { width: 640px; height: 640px;filter: }

JavaScript

var ctx = document.getElementById('a1hgj').getContext("2d");
var newc = {canvas: document.createElement("canvas"), ctx: null};
var l1 = `
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                                                           
a.................................................a                                                           
a.................................................a                                                           
a..................bb....f........................a                                                           
a.......................bb........................a                                                           
a............b.bbb.f........b.....................a                                                           
a..............................b..................a                                                           
abbbbbbbbbbb......................................a                                                           
a.................................bff....f.....g..a                                                           
a...................................bbbbbbbb...bb.a                                                           
a.................................................a                                                           
addddddddddddddddddddddddddddddddddddddddddddddddda                                                           
`;
var l1 = l1.replace(/\n|\r/g, "");


newc.ctx = newc.canvas.getContext("2d");
newc.ctx.fillStyle = 'white'
newc.ctx.fillRect(0,0,64,64);
newc.ctx.fillStyle = "black";
newc.ctx.font = "10px Arial";
newc.ctx.fillText("its complete", 5,20);
newc.ctx.fillText("darkness", 15,35);

var block = {ctx:null, canvas: document.createElement('canvas')}
block.canvas.width = 8;
block.canvas.height= 8;
block.ctx = block.canvas.getContext("2d");
block.ctx.fillStyle="red";
block.ctx.fillRect(0,0,8,8);

var cs = {
	0:...