JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

Zoom<br/>
<canvas id="z" width="256" height="240"></canvas>
<br/>
Preview
<br/>
<canvas id="p" width="256" height="240"></canvas>

CSS

canvas{
  border: 1px solid #333;
  box-shadow: 2px 2px;
}
body {
  background-color: #222;
}

JavaScript

var ntsc = [
  "7c7c7c","0000fc","0000bc","4428bc","940084","a80020","a81000","881400","503000","007800","006800","005800","004058","000000","010000","000100",
  "bcbcbc","0078f8","0058f8","6844fc","d800cc","e40058","f83800","e45c10","ac7c00","00b800","00a800","00a844","008888","000001","010001","010100",
  "f8f8f8","3cbcfc","6888fc","9878f8","f878f8","f85898","f87858","fca044","f8b800","b8f818","58d854","58f898","00e8d8","787878","000101","010101",
  "fcfcfc","a4e4fc","b8b8f8","d8b8f8","f8b8f8","f8a4c0","f0d0b0","fce0a8","f8d878","d8f878","b8f8b8","b8f8d8","00fcfc","f8d8f8","020101","010201"
];
var kb_repeat = 8;
var kb = {
  l: 0,
  r: 0,
  u: 0,
  d: 0,
  s: 0,
  p: 0
};
var kb_keys = {
  u:87,
  d:83,
  l:65,
  r:68,
  s:32,
  p:80
};

var c = {};
c.d = {
  	/* d is for document */
		canvas: document.getElementById("z"),
		ctx: document.getElementById("z").getContext("2d")
};
var cursor = {
	x:c.d.canvas.width/2,
  y:c.d.canvas.height/2
};
c.g =  newCanvas (256, 240);

draw();

function draw () {
	c.d.ctx.fillStyle = "rgba(20,20,20,1)";
	c.d.ctx.fillRect(0,0,c.d.canvas.width, c.d.canvas.height);
  c.d.ctx.drawImage(c.g.canvas, 0,0);
  c.d.ctx.fillStyle = "white";

  c.d.ctx.fillRect(
  	cursor.x,
    cursor.y,
    1,1);
    /* p is for showing the palette */
    if (kb.p){
      ntsc.forEach(function (el,ind){
        c.d.ctx.fillStyle = "#"+el;
        c.d.ctx.fillRect(10* (ind % 16), 10*Math.floor((ind/16)),
        10,10);
      });
    }
	window.requestAnimationFrame(draw);
}

function newCanvas (w,h) {
	let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
	canvas.width = w;
  canvas.height = h;
	return {
  	canvas: canvas,
    ctx: ctx
  }
}


setInterval (function(){
    if (kb.u) cursor.y--;
    if (kb.d) cursor.y++;
    if (kb.l) cursor.x--;
    if (kb.r) cursor.x++;
    if (cursor.x<0) cursor.x = c.d.canvas.width;
    if (cursor.y<0) cursor.y = c.d.canvas.height;
    if (cursor.x>c.d.canvas.width) cursor.x = 0;
    if...