ZeroCanvas 是一款無後端、純 P2P 架構的即時協作白板工具。
讓平板上的手寫內容，透過 WebRTC 即時同步顯示到電腦瀏覽器，專為課堂投影、遠距教學與簡報展示設計。

• 零後端：完全不需要伺服器，所有資料點對點傳輸（WebRTC DataChannel）
• 跨裝置同步：平板手寫 → 電腦即時顯示，延遲極低
• QR Code 快速連線：Host 產生 Room，Client 掃碼即加入，無需帳號
• 多種繪圖工具：筆刷（Catmull-Rom 平滑曲線）、橡皮擦、直線、矩形
• 壓力感應：支援 PointerEvent pressure，筆觸粗細隨壓力變化
• 跨裝置座標一致：座標正規化（0~1），確保不同螢幕尺寸下畫面對齊
• 離線緩衝：斷線後繼續繪圖，重連後自動補送
• 全螢幕模式：Host 端支援全螢幕投影，resize 後畫面自動還原

1. Host（電腦） 開啟網站，點擊「建立白板」
2. 畫面上會出現 Room ID 與 QR Code
3. Client（平板） 掃描 QR Code，或手動輸入 Room ID 加入
4. 開始在平板上手寫，電腦畫面即時同步顯示

# 安裝相依套件 npm install # 啟動開發伺服器（需 HTTPS 或 localhost） npm run dev # 建置正式版本 npm run build

WebRTC 需要 HTTPS 環境（localhost 除外）。建議使用 vite --https 或部署到靜態主機。

本專案為純靜態應用，可部署至任何靜態主機：

• GitHub Pages：設定 vite.config.ts 中的 base 路徑後，執行 npm run deploy
• Cloudflare Pages：直接連結 GitHub repo，自動部署

⚠️ PeerJS 公共伺服器（0.peerjs.com）有連線數限制，正式上線建議自架 PeerServer。

src/ ├── components/ │ ├── ConnectionStatus.tsx # 連線狀態指示器 │ ├── DrawingCanvas.tsx # 雙層 Canvas 繪圖引擎 │ ├── QRCodeDisplay.tsx # QR Code 顯示元件 │ └── Toolbar.tsx # 繪圖工具列 ├── contexts/ │ └── PeerContext.tsx # 全域 P2P 連線狀態 ├── hooks/ │ ├── useDrawing.ts # 繪圖狀態與工具邏輯 │ └── usePeer.ts # PeerJS 連線管理 ├── pages/ │ ├── LandingPage.tsx # 首頁（角色選擇） │ ├── HostPage.tsx # 投影端畫面 │ └── ClientPage.tsx # 繪圖端畫面 ├── services/ │ └── syncService.ts # 繪圖事件序列化與傳輸 ├── types/ │ ├── drawing.ts # 繪圖相關型別定義 │ └── peer.ts # 連線相關型別定義 ├── theme.ts # MUI 主題設定 ├── App.tsx └── main.tsx 

MIT License