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...b.a
a.................................................a
addddddddddddddddddddddddddddddddddddddddddddddddda
`;

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 distance = 40;
const splash = 0, level = 1;
var mode = splash;

function draw() {
  ctx.clearRect(0,0,64,64);
  ctx.fillStyle="rgba(0,0,0,1)";
  ctx.beginPath();
  ctx.arc(32,32,distance,0,2*Math.PI);
  ctx.fill();
  ctx.stroke();
  ctx.save();
  ctx.globalCompositeOperation="source-in";
  ctx.drawImage(newc.canvas, 0,0);
  ctx.restore();
	window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);

setInterval(function(){
  // game loop
  if (mode == splash) {
  	distance-=0.5;
    if (distance<4) {
      mode = level;
      newc.ctx.fillStyle = 'black'
			newc.ctx.fillRect(0,0,64,64);
    }
  }
  if(mode == level) {
  	
  }
  
},32);