直到發現其實改變 canvas 並不需要拿到 canvas 本體的最新變數，只要對他的記憶體空間處理就好，這是什麼意思呢？
舉個手術的例子：

想像一個病人在手術過程中，這個病人需要經過多個醫生的處理。
包括外科醫生、麻醉師和護士等。

我們的 canvas 就好像是這個病人，每個手術動作 (function) 的參照對象都是對這個病人(canvas)，而醫生、麻醉師等是執行與存放這些 function 的 component。

先前使用 state 存取病人(canvas) 狀態的不合理之處在於：
不同步驟會影響到的醫護人員是不同的，每個醫護人員(component)負責關注的部分是不相關的，其實不需要執行一個動作(function) 就要每個醫護人員(component)過來看(更新)這個病人(canvas)目前的狀況。

就像，當外科醫生開始下第一刀，此時要處理的狀態都是只跟外科醫生有關的事，
你就不需要因為這一刀，要所有麻醉師、護理師來看一輪，確認與更新病患狀態，因為在這當下，這些醫護人員(component) 保持了病患（canvas）最新狀態，但有這資訊卻一點用也沒有。
因為當前步驟根本與這個醫護人員(component) 無關，這樣做雖然確保每個醫護人員(component) 都能取得最新資訊，但整個手術過程會非常沒效率（劃一刀要十個人來確認）

其實我們應該要讓每個醫護人員(component) 只需關注他們各自需要關注的事情就好。

護士A(component A) 只注意血壓，他監聽病人血壓，在血壓值到達某個數值時會作出處理(監聽事件以觸發 function)。
護士B (component B) 只注意血氧，在含氧量過低到達某個數值時會作出處理(監聽事件以觸發 function)。

說起來那就是：

使用 useRef來紀錄 canvas 狀態

1. 不會觸發重新渲染：useRef 的變化不會觸發組件的重新渲染。如果需要觸發重新渲染，應該使用 useState。
2. 初始值：useRef 可以接受一個初始值，這個值會被設置為 .current 屬性的初始值。
3. 持久性：useRef 創建的引用對象在組件的整個生命週期內保持不變。

再加上 使用 canvas 的事件監聽。

這些醫生和護士需要持續地參考病人的狀態（如心跳、血壓等），但這些狀態的變化不會影響他們的操作流程。

病人的狀態是一個持久的引用，所有參與手術的人都可以隨時查看和更新這些狀態，但這些狀態的變化不會觸發手術過程的重新開始。