html canvas fx component

fx.js

const fx = {
  flashCounter: 0,
  flashDamp: 10,//increase to make flash faster, decrease for longer flash
  flashColor: "#fff",
  shakeCounter: 0,
  shakeAmplitude: 20,
  shakeDamp: 5,//increse to make shake shorter, decrease to shake longer
  shakeSpeed: 0.1,
  shake(amount = 1) {
    this.shakeCounter = amount;
  },
  flash(color = "#fff") {
    this.flashColor = color;
    this.flashCounter = 1;
  },
  update(dt) {//dt in seconds, call this method on every loop cycle
    this.flashCounter = Math.max(0, this.flashCounter - dt * this.flashDamp);
    this.shakeCounter = Math.max(0, this.shakeCounter - dt * this.shakeDamp);
  },
  preDraw(ctx) {//call this methods right after clearing everything and before drawing anything
    ctx.translate(
      Math.cos(Date.now() * this.shakeSpeed) * this.shakeCounter * this.shakeAmplitude,
      Math.sin(Date.now() * this.shakeSpeed) * this.shakeCounter * this.shakeAmplitude,
    )
  },
  draw(ctx) {//call this after drawing everything else
    ctx.fillStyle = this.flashColor;
    ctx.globalAlpha = this.flashCounter;
    ctx.fillRect(0, 0, innerWidth, innerHeight);
    ctx.globalAlpha = 1;
  }
}