Canvas was getting 0×0 on first render because the parent div with aspect-ratio CSS hadn't resolved yet. Now getBoundingClientRect() is called directly on the canvas element each time.
@@ -50,9 +50,9 @@ export default function SharePage() {
useEffect(() => {
const el = videoContainerRef.current;
if (!el) return;
- const obs = new ResizeObserver(() => {
- setVideoDims({ width: el.offsetWidth, height: el.offsetHeight });
- });
+ const update = () => setVideoDims({ width: el.offsetWidth, height: el.offsetHeight });
+ update();
+ const obs = new ResizeObserver(update);
obs.observe(el);
return () => obs.disconnect();
}, []);
@@ -131,8 +131,11 @@ export function AnnotationCanvas({
const canvas = canvasRef.current;
if (!canvas) return;
- canvas.width = width;
- canvas.height = height;
+ // Read real size from bounding rect — not the stale width/height props
+ const { width: w, height: h } = canvas.getBoundingClientRect();
+ if (w === 0 || h === 0) return;
+ canvas.width = w;
+ canvas.height = h;
redraw();
}, [width, height, pendingStrokes]);