JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<button id="toggle">Toggle fullscreen</button>
<canvas id="canvas"></canvas>

CSS

#canvas {
  border: 1px solid black;
}
#canvas.fullscreen {
  width: 100%;
}

#toggle {
  display: block;
  margin-bottom: 10px;
}

JavaScript

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

// This sets the dimensions of the canvas "image"
// which is then scaled in a bitmappy way by CSS
canvas.width = 72;
canvas.height = 32;

ctx.fillText("Hello, world!", 10, 20);

document.querySelector("#toggle").addEventListener("click", () => {
	canvas.classList.toggle("fullscreen");
})