JSFiddle - React, Tailwind, and code Playground

by Kolichikov

HTML

<button onclick="destroyCanvas()">Delete Canvas</button>
<button onclick="tryToCreateCanvas()">Create Canvas</button>
<input id="widthInput" value="20000" />
<input id="heightInput" value="20000" />
<div id="result">

</div>
<div id="container" style="border-width:4px; border-color:black">

</div>

JavaScript

createCanvas = function() {
  var element = document.createElement("canvas");
  element.id = "canvasId";
  document.getElementById("container").appendChild(element);
  return element;
};

destroyCanvas = function() {
  var element = document.getElementById("canvasId");
  document.getElementById("container").removeChild(element);
};

tryToCreateCanvas = function() {
  var width = document.getElementById("widthInput").value;
  var height = document.getElementById("heightInput").value;
  var element = createCanvas();
  try {
    element.width = width;
    element.height = height;
    var context = element.getContext("2d");
    context.scale(width, height);
    document.getElementById("result").innerHTML = "Success!";
  } catch (e) {
    document.getElementById("result").innerHTML = "Failure!";
  }
};