JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>You can't screenshot this</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      const canvas = document.getElementById("canvas")
      const ctx = canvas.getContext("2d", { alpha: false })

      const CELL_SIZE = 2
      const CIRCLE_RADIUS = 300
      const STEP_PX = 4
      const STEP_MS = 32
      const MASK_BLOCK_SIZE = CELL_SIZE

      let circleTile = null
      let lastStepTime = 0
      let offsetY = 0
      let backgroundOffsetY = 0
      let maskCanvas = null
      let circleBuffer = null
      let compositeCanvas = null
      let textString = `HELLO`

      function getTextFromQuery() {
        const params = new URLSearchParams(window.location.search)
        const t = params.get("text")
        return t
      }

      // No setters needed; URL is source of truth

      function createNoiseCanvas(width, height) {
        const off = document.createElement("canvas")
        off.width = width
        off.height = height
        const octx = off.getContext("2d", { alpha: false })
        octx.imageSmoothingEnabled = false

        const cols = Math.ceil(width / CELL_SIZE)
        const rows = Math.ceil(height / CELL_SIZE)
        for (let y = 0; y < rows; y++) {
          for (let x = 0; x < cols; x++) {
            const r = Math.random()
            octx.fillStyle = r < 1 / 2 ? "#000" : "#fff"
            octx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE)
          }
        }
        return off
      }

      function createPixelatedTextMask(text, blockSize, viewportWidth, viewportHeight) {
        const lines = String(text).split("\n")
       ...