JSFiddle - React, Tailwind, and code Playground

by mattstyles

HTML

<input class='js-input' />
<canvas class='js-canvas' />

JavaScript

const width = 500
const height = 300
const input = document.querySelector('.js-input')
const canvas = document.querySelector('.js-canvas')
const ctx = canvas.getContext('2d')

ctx.font = '40px sans-serif'

const render = text => {
  ctx.clearRect(0, 0, width, height)
  ctx.fillStyle = 'rgb(36, 38, 42)'
  ctx.fillText(text, 0, 50)
}

render('')

input.addEventListener('input', event => {
  render(input.value)
})