JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=c width=300 height=300></canvas>
<canvas id=c2 width=300 height=300></canvas>

<br><br>

CSS

canvas {
  border: 6px double #00ff00;
  position:absolute;
  top:0px;
  left:0px;
}

JavaScript

/* end of live coding live stream */

var ctx = c.getContext('2d');
var screen = 'splash';
var levelBGImg = new Image();
var carSprite = new Image();
var camx = -100;
var camy = -100;
var caroffsetx = 0;
var caroffsety = 0;
var carx = 0;
var cary = 0;
var carspeed = 0;
var topspeedf = 1;
var topspeedr = -0.8;
//
var mX = 0;
var mY = 0;
var screenContext = document.getElementById('c2').getContext('2d');
//
var kb = {l:0,r:0,u:0,d:0};
//
var imageObj = {
  red: 255,
  green: 255,
  blue: 255
};
document.getElementById('c2').addEventListener('mousemove', function(evt) {
   var mousePos = getMousePos(document.getElementById('c2'), evt);
   mX = mousePos.x;
   mY = mousePos.y;
 }, false);

 function getMousePos(c2, evt) {
   var rect = document.getElementById('c2').getBoundingClientRect();
   return {
     x: evt.clientX - rect.left,
     y: evt.clientY - rect.top
   };
 }
window.onkeydown = function (e) {
  switch(e.keyCode) {
    case 38:
      kb.u = 1;
      e.preventDefault();
      break;
    case 40:
      kb.d = 1;
      e.preventDefault();
      break;
    case 37:
      kb.l = 1;
      e.preventDefault();
      break;
    case 39:
      kb.r = 1;
      e.preventDefault();
      break;
  }
};
window.onkeyup = function (e) {
  switch(e.keyCode) {
    case 38:
      kb.u = 0;
      e.preventDefault();
      break;
    case 40:
      kb.d = 0;
      e.preventDefault();
      break;
    case 37:
      kb.l = 0;
      e.preventDefault();
      break;
    case 39:
      kb.r = 0;
      e.preventDefault();
      break;
  }
};

levelBGImg.loaded = false;
levelBGImg.onload = function() {
  levelBGImg.loaded = true;
  console.log('loaded level bg');
};
//levelBGImg.src = "http://www.spriters-resource.com/resources/sheets/60/62776.png";
levelBGImg.src = "http://i.imgur.com/uXVGma9.png";
carSprite.loaded = false;
carSprite.onload = function() {
  carSprite.loaded = true;
  console.log('loaded car sprite');
};
carSprite.src =...