JSFiddle - React, Tailwind, and code Playground

by willystyle

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Happy 4th!!!</title>

    <style media="screen">
      h1 {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-family: sans-serif;
        font-size: 5em;
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <h1>Happy 4TH!!!</h1>
    <canvas id="usa"></canvas>

    <script>

    'use strict'

    const PI2 = Math.PI * 2
let random = (min, max) => Math.random() * (max - min + 1) + min | 0

class Merica {
  constructor() {
    this.resize()

    this.fireworks = []
    this.counter = 0

  }
  resize() {
    this.width = canvas.width = window.innerWidth
    let center = this.width / 2 | 0
    this.spawnA = center - center / 4 | 0
    this.spawnB = center + center / 4 | 0

    this.height = canvas.height = window.innerHeight
    this.spawnC = this.height * .1
    this.spawnD = this.height * .5

  }
  onClick(evt) {
    let x = evt.clientX || evt.touches && evt.touches[0].pageX
    let y = evt.clientY || evt.touches && evt.touches[0].pageY

    let count = random(3, 5)
    for (let i = 0; i < count; i++) this.fireworks.push(new Firework(
      random(this.spawnA, this.spawnB),
      this.height,
      x,
      y,
      random(300, 400),
      random(30, 100)))

    this.counter = -30

  }
  update() {
    ctx.globalCompositeOperation = 'hard-light'
    ctx.fillStyle = 'rgba(20,20,20,0.15)'
    ctx.fillRect(0, 0, this.width, this.height)

    ctx.globalCompositeOperation = 'lighter'
    for (let firework of this.fireworks) firework.update()

    if (++this.counter === 15) {
      this.fireworks.push(new Firework(
        random(this.spawnA, this.spawnB),
        this.height,
        random(0, this.width),
        random(this.spawnC, this.spawnD),
        random(300, 450),
        random(30, 110)))
      this.counter = 0
    }

    if (this.fireworks.length > 1000) this.fireworks =...