JSFiddle - React, Tailwind, and code Playground

by XTREME104

HTML

<html>
  <body onload="init()">
    <canvas id="canvas"></canvas>
    <textarea id="input" onkeyup="change()"></textarea>
  </body>
</html>

CSS

#input {
  position: absolute;
  left: 0px;
  top: 0px;
}

JavaScript

var supports_html5_storage = 'localStorage' in window && window['localStorage'] !== null;

const WIDTH_MARGIN = 0.5;
const HEIGHT_MARGIN = 0.5;
const LINE_SPACING = 10;
const START_SIZE = 200;

var TEXT = "cheer up,\ni love you :)";

var canvas, context;

function init () {
  if (supports_html5_storage && localStorage.getItem("text"))
      TEXT = localStorage.getItem("text");
  
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  document.getElementById("input").value = TEXT;
  window.addEventListener("resize", resize);
  resize(null);
}

function draw () {
  var texts = document.getElementById("input").value.split(/\r\n|\r|\n/g);
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "#000000";
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  context.fillStyle = "#4466FF";
  
  var size = START_SIZE + 1;
  context.font = size + "px Arial";
  for (var i = 0; i < texts.length; i++) {
    while (size && (context.measureText(texts[i]).width > canvas.width * WIDTH_MARGIN || size > canvas.height * HEIGHT_MARGIN)) {
      size--;
      context.font = size + "px Arial";
    }
  }
  
  for (var i = 0; i < texts.length; i++) {
    var y = -(size + LINE_SPACING) * (texts.length - 1) / 2 + (size + LINE_SPACING) * i;
    context.fillText(texts[i], canvas.width / 2 - context.measureText(texts[i]).width / 2, canvas.height / 2 + y);
  }
}

function resize (event) {
  canvas.width = window.innerWidth - 10;
  canvas.height = window.innerHeight - 10;
  draw();
}

function change () {
  if (supports_html5_storage)
    localStorage.setItem("text", document.getElementById("input").value);
  draw();
}