From 192286a86a8fab52a4a83f7821c33ba4698c627e Mon Sep 17 00:00:00 2001
From: Bradlee Speice <bradlee@speice.io>
Date: Wed, 11 Dec 2024 17:31:34 -0500
Subject: [PATCH] Formatting tweak

---
 blog/2024-11-15-playing-with-fire/src/Canvas.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
index 012c540..45e0a64 100644
--- a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
+++ b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
@@ -1,6 +1,5 @@
 import React, {useEffect, useState, createContext, useRef} from "react";
 import {useColorMode} from "@docusaurus/theme-common";
-import BrowserOnly from "@docusaurus/BrowserOnly";
 
 type PainterProps = {
     width: number;
@@ -76,13 +75,18 @@ export const Canvas: React.FC<CanvasProps> = ({style, children}) => {
         }
     }, [painter]);
 
-    const filter = useColorMode().colorMode === 'dark' ? 'invert(1)' : '';
+    const canvasProps = {
+        ref: canvasRef,
+        width,
+        height,
+        style: {filter: useColorMode().colorMode === 'dark' ? 'invert(1)' : ''}
+    }
 
     return (
         <>
             <center>
                 <div ref={sizingRef} style={style}>
-                    {width > 0 ? <canvas ref={canvasRef} width={width} height={height} style={{filter}}/> : null}
+                    {width > 0 ? <canvas {...canvasProps}/> : null}
                 </div>
             </center>
             <PainterContext.Provider value={{width, height, setPainter}}>