From d60bd99355a1462561b2dfa119f2454e8cd0e1ef Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 2 Jan 2020 15:14:05 -0800
Subject: [PATCH] [WIP] Experiment with new way to clear canvas

---
 js/components/Visualizer.tsx | 12 ++++++++++--
 js/hooks.ts                  |  8 ++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/js/components/Visualizer.tsx b/js/components/Visualizer.tsx
index 1cbdf93f..a8dbef18 100644
--- a/js/components/Visualizer.tsx
+++ b/js/components/Visualizer.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState } from "react";
+import React, { useMemo, useEffect, useState, useCallback } from "react";
 
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
@@ -91,6 +91,7 @@ export default function Visualizer({ analyser }: Props) {
           paintBars();
         };
     }
+    // Maybe Milkdrop is active.
     return null;
   }, [
     bgCanvas,
@@ -103,7 +104,14 @@ export default function Visualizer({ analyser }: Props) {
     style,
   ]);
 
-  useAnimationLoop({ paintFrame });
+  const clear = useCallback(() => {
+    if (canvasCtx == null) {
+      return;
+    }
+    canvasCtx.clearRect(0, 0, width, height);
+  }, [canvasCtx, height, width]);
+
+  useAnimationLoop({ paintFrame, clear });
 
   return (
     <canvas
diff --git a/js/hooks.ts b/js/hooks.ts
index f8b007af..1dc55187 100644
--- a/js/hooks.ts
+++ b/js/hooks.ts
@@ -45,11 +45,15 @@ export function usePromiseValueOrNull<T>(propValue: Promise<T>): T | null {
 
 type AnimationLoopOptions = {
   paintFrame: null | (() => void);
+  clear: null | (() => void);
 };
 
-export function useAnimationLoop({ paintFrame }: AnimationLoopOptions) {
+export function useAnimationLoop({ paintFrame, clear }: AnimationLoopOptions) {
   useLayoutEffect(() => {
     if (paintFrame == null) {
+      if (clear != null) {
+        clear();
+      }
       return;
     }
 
@@ -67,7 +71,7 @@ export function useAnimationLoop({ paintFrame }: AnimationLoopOptions) {
         window.cancelAnimationFrame(animationRequest);
       }
     };
-  }, [paintFrame]);
+  }, [clear, paintFrame]);
 }
 
 export function useScreenSize() {