x: parseFloat()

in src/components/GeniePiano.tsx [86:117]


      x: parseFloat(x),
      y: 0,
      width: parseFloat(width),
      height: 0,
      color: CONSTANTS.COLORS[button],
      on: true,
    };
    this.notes.push(noteToPaint);
    return noteToPaint;
  }

  stopNote(noteToPaint) {
    noteToPaint.on = false;
  }

  startDrawLoop() {
    this.prevTimestamp = performance.now();
    window.requestAnimationFrame(this.drawLoop.bind(this));
  }

  drawLoop(timestamp: DOMHighResTimeStamp) {
    const dy = 4 * (timestamp - this.prevTimestamp) * (1 / 60);
    this.prevTimestamp = timestamp;
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

    // Remove all the notes that will be off the page;
    this.notes = this.notes.filter(
      (note) => note.on || note.y < this.contextHeight
    );

    // Advance all the notes.
    for (let i = 0; i < this.notes.length; i++) {