gradient

Author: hmdroh

packages/ui/src/gradient-preview/PastelGradientCanvas.tsx

@@ -9,12 +9,13 @@ export const PastelGradientCanvas = ({
   width?: number;
   height?: number;
 }) => {
-  const canvasRef = useRef(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
   useEffect(() => {
+    if (!canvasRef.current) return;
     const canvas = canvasRef.current;
     const ctx = canvas.getContext("2d");
-    let animationFrameId;
+    let animationFrameId: number;
 
     const resizeCanvas = () => {
       canvas.width = window.innerWidth;
@@ -30,6 +31,11 @@ export const PastelGradientCanvas = ({
       const w = canvas.width;
       const h = canvas.height;
 
+      if (!ctx) {
+        animationFrameId = requestAnimationFrame(animate);
+        return;
+      }
+
       ctx.clearRect(0, 0, w, h);
 
       // Base fill for a light pastel foundation