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, "");
console.log(l1);
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 temp = document.createElement('canvas');
temp.width = 8;
temp.height = 8;
var block = temp.getContext("2d");
var cs = {
	0: document.createElement("img"),
	1: document.createElement("img")
};
cs[0].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjElEQVQ4Ea2RgRGAIAhFsVVcpNEcrZ0cgA4LT9TPZcWdhyY8X0pExDJyiiXreiFfgLeQjdrY28Xz+Rd9rgb5iOXInCIxsxmeS7gvq9ZI8yxCkNIxqoFsyekoENgAULP33QKcV0C/YO4AaarBDGINtHIh/wuYKaoM2oMG0oCaFCoZAtoibw4B/Yv0a4We5GlXJZvpUUAAAAAASUVORK5CYII=";
cs[1].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApElEQVQ4Ea2R6w3CMAyEL4ifMEUHgdEyWgeBKTpA0IXaIcHXqohIkZ/3xXUBoPAuearW4gP2DfgVcsZwljx55pqf7isnrS+3+h3A3MI9SA+gGMDl9mgEACmxLT4npv2V+VvMeincb3wqgCWHxH0S4gCh2033gHUHkUrtoS7RBFvfyp4I0k9gpAP2v4BoRBtG1eQEFCiRQWkl4LNpy5eA8Y+MsUFfNwBEI1Rd8vgAAAAASUVORK5CYII=";


var character = {sprite: 0, x: 10, y:10};


var distance = 40;
const splash = 0, level = 1;
var mode =...