JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<canvas></canvas>

JavaScript

console.clear();

HTMLCanvasElement.prototype.kEdit = function() {
  //Config
  let width = 500;
  let height = 200;
  let fontSize = 18;
  
  //Internal
  let ctx = this.getContext("2d");
  let lines = [""];
  let currentLine = 0;
  
  //Appearance
  ctx.font = fontSize + " monospace";
  this.width = width;
  this.height = height;
  this.style.background = "#333";
  
  //Events
  this.addEventListener("mousedown", e => {
    
  }, false);
  
  document.addEventListener("keydown", e => {
    if(e.which !== 8) {
      lines[currentLine] += e.key;
    }
  }, false);
  
  //Drawing
  const redraw = () => {
    ctx.fillStyle = "#333";
    ctx.fillRect(0, 0, width, height);
    
    //Highlight current line
    ctx.fillStyle = "rgba(0,0,0,0.25)";
    ctx.fillRect(0, currentLine * fontSize, width, fontSize);
    
    //Draw lines
    ctx.fillStyle = "#fff";
    let nLines = lines.length;
    while (nLines--) {
      let y = nLines * fontSize + fontSize - fontSize / 4;
      //Line number
      ctx.fillText(nLines + "", 5, y);
      ctx.fillText(lines[nLines], 25, y)
    }
    
    if (new Date().getMilliseconds() < 500) {
      ctx.fillStyle = "rgba(255,255,255,0.5)";
      ctx.fillRect(100, currentLine * fontSize, 2, fontSize);
    }
    
    requestAnimationFrame(redraw);
  };
  requestAnimationFrame(redraw);
};

document.querySelector("canvas").kEdit();