fix: responsive canvas dimensions for static and infinite scroll pages by anth0nycodes · Pull Request #27 · anth0nycodes/tracemark

anth0nycodes · 2026-03-08T05:14:42Z

Change Summary + Media (if applicable)

Context

The previous implementation of setting the dimensions for the canvas is ineffective for sites that render in content gradually (i.e infinite scroll) as clientHeight does not change when content is added that overflows beyond the element’s visible area. We also couldn't directly use scrollHeight because that causes too much overhead, causing each operation we try to do on the canvas to be expensive -> laggy.

Summary

Replaced static clientHeight sizing with a dynamic scroll-based expansion approach that works on both static pages and infinite scroll sites. Fixed infinite expansion bug at extreme zoom levels by using a collapse-and-measure technique to get clean scrollHeight readings without the canvas inflating its own measurements. Also, added a 8,000px height cap to prevent performance degradation.

How the collapse-and-measure approach works

The core issue was that the canvas (despite being absolutely positioned) inflated the document's scrollHeight, creating a feedback loop: the canvas expands → page becomes taller → user can scroll further → canvas expands again.

The collapse-and-measure approach breaks this cycle:

Collapse the canvas height to 0, removing it from affecting scrollHeight.
Measure scrollHeight to get the real content height of the page.
Restore the canvas to its previous height.
Guard the expansion — the canvas only grows if visibleBottomY <= contentScrollHeight, meaning the user is still within actual page content, not scrolling into empty space the canvas itself created.

Test plan

Open an infinite scroll site (e.g., Twitter) — canvas should expand as new content loads
Zoom to 25% on a static page and scroll to the bottom — canvas should stop at the content boundary
Verify no lag on initial page load
Confirm the alert fires when canvas exceeds 8,000px
Confirm canvas width respects the vertical scrollbar

WIP

Copilot

Pull request overview

Updates Tracemark’s Fabric canvas sizing logic to better support responsive layouts and infinite-scroll pages by dynamically expanding height based on scroll position while introducing a maximum height cap.

Changes:

Split canvas sizing into width, base height, and scroll-driven height expansion helpers.
Add scroll handler + ResizeObserver-based resizing to react to page changes.
Introduce an 8,000px canvas height cap (with an alert) to limit performance impact.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-11T02:38:57Z

src/components/canvas.tsx

+      updateCanvasWidth(fc);
+      updateCanvasHeight(fc);


handleResize calls updateCanvasHeight, which sets the canvas height to clientHeight (viewport). Because ResizeObserver is observing documentElement/body, it can fire on content growth (e.g., infinite scroll) and shrink an already-expanded canvas back down to the viewport, potentially hiding existing drawings. Consider making resize only adjust width, or set height to Math.max(fc.getHeight(), viewportHeight/current desired height), or invoke the same dynamic-height logic instead of forcing clientHeight.

Suggested change

updateCanvasWidth(fc);

updateCanvasHeight(fc);

// On resize, only adjust the canvas width. Height is managed dynamically

// via updateDynamicCanvasHeight to avoid shrinking an already-expanded canvas.

updateCanvasWidth(fc);

src/components/canvas.tsx

Copilot · 2026-03-11T02:38:58Z

src/components/canvas.tsx

    return () => {
      fc.dispose();
-      window.removeEventListener("resize", initCanvasDimensions);
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", handleScroll);
    };


resizeTimeout can still fire after unmount/fc.dispose() (e.g., a ResizeObserver callback scheduled right before cleanup), which would call handleResize on a disposed Fabric canvas. Clear the pending timeout in the cleanup function to avoid post-dispose dimension updates/errors.

Copilot · 2026-03-11T02:38:58Z

src/components/canvas.tsx

-    window.addEventListener("resize", initCanvasDimensions);
+    resizeObserver.observe(document.documentElement);
+    resizeObserver.observe(document.body);
+    window.addEventListener("scroll", handleScroll);


updateDynamicCanvasHeight is invoked directly on every scroll event and performs multiple setDimensions calls (including a collapse to height 0). This can be expensive during scrolling. Consider throttling via requestAnimationFrame/debounce and registering the listener as { passive: true } since it doesn't call preventDefault().

Copilot

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-12T04:48:50Z

src/components/canvas.tsx

@@ -69,7 +135,8 @@ export function Canvas({ currentTool, setCurrentTool }: CanvasProps) {

    return () => {
      fc.dispose();
-      window.removeEventListener("resize", initCanvasDimensions);
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", handleScroll);
    };


resizeTimeout is not cleared in the effect cleanup. If a resize event schedules handleResize and the component unmounts (disposing the Fabric canvas) before the timeout fires, the callback can run against a disposed fc. Clear the pending timeout during cleanup (and consider typing it as ReturnType<typeof setTimeout> | undefined to reflect the runtime behavior).

Copilot · 2026-03-12T04:48:51Z

src/components/canvas.tsx

+  if (
+    visibleBottomY >= currentCanvasHeight &&
+    currentCanvasHeight > CANVAS_MAX_HEIGHT_IN_PIXELS
+  ) {
+    alert(
+      "This page is too tall for Tracemark to support. You can still draw on the visible canvas area, but it won't expand further."
+    );
+    fc.setDimensions({
+      height: CANVAS_MAX_HEIGHT_IN_PIXELS,
+    });
+    // TODO: remove alert and replace with better user-facing error handling
+    return;


Using alert(...) here is blocking and can be triggered repeatedly as the user scrolls near the bottom (especially if the height briefly exceeds the cap). Consider switching to non-blocking in-app UI and/or guarding so the message is only shown once per page/session.

Copilot · 2026-03-12T04:48:51Z

src/components/canvas.tsx

+  while (
+    newCanvasHeight < visibleBottomY &&
+    visibleBottomY <= contentScrollHeight &&
+    newCanvasHeight < CANVAS_MAX_HEIGHT_IN_PIXELS
+  ) {
+    newCanvasHeight += EXPANSION_INCREMENT_IN_PIXELS;
+  }
+
+  if (newCanvasHeight > currentCanvasHeight) {
+    fc.setDimensions({
+      height: Math.max(newCanvasHeight, viewportHeight),
+    });


newCanvasHeight can exceed CANVAS_MAX_HEIGHT_IN_PIXELS because the loop condition checks the value before adding EXPANSION_INCREMENT_IN_PIXELS. This allows setting the Fabric canvas height above the intended cap (e.g. 7800 -> 8300). Clamp the final height to the max (or change the loop to prevent overshoot) and consider adjusting the alert/guard to trigger when an expansion would cross the cap (not only when currentCanvasHeight > CANVAS_MAX_HEIGHT_IN_PIXELS).

Copilot · 2026-03-12T04:48:51Z

src/components/canvas.tsx

-    initCanvasDimensions();
+    const handleResize = () => {
+      updateCanvasWidth(fc);
+      updateCanvasHeight(fc);


handleResize currently calls updateCanvasHeight, which sets the canvas height to clientHeight (viewport height). If the canvas has already been expanded via scrolling, any resize/observer trigger can shrink it back down and effectively cut off previously drawable areas. Consider keeping the existing expanded height (e.g., max(currentHeight, viewportHeight)) and only growing on resize, not shrinking.

Suggested change

updateCanvasHeight(fc);

const viewportHeight = document.documentElement.clientHeight;

const currentHeight = fc.getHeight();

const desiredHeight = Math.max(currentHeight, viewportHeight);

const newHeight = Math.min(CANVAS_MAX_HEIGHT_IN_PIXELS, desiredHeight);

if (newHeight !== currentHeight) {

fc.setHeight(newHeight);

fc.renderAll();

}

Copilot · 2026-03-12T04:48:51Z

src/components/canvas.tsx

+    const handleScroll = () => {
+      updateDynamicCanvasHeight(fc);
+    };
+
+    let resizeTimeout: number;
+
+    const resizeObserver = new ResizeObserver(() => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(handleResize, 50); // debounce to prevent rapid calls
+    });

-    window.addEventListener("resize", initCanvasDimensions);
+    resizeObserver.observe(document.documentElement);
+    resizeObserver.observe(document.body);
+    window.addEventListener("scroll", handleScroll);


The scroll handler runs on every scroll event and updateDynamicCanvasHeight does multiple setDimensions calls plus a scrollHeight read, which can force layout and be expensive during scrolling. Consider adding a requestAnimationFrame-based throttle and registering the listener as { passive: true } to reduce main-thread jank.

anth0nycodes and others added 9 commits March 8, 2026 00:14

fix: canvas dimensions

7e25976

WIP

wip

5cbf15e

add comments

e181bdf

Merge branch 'main' into anthony/canvas-dimensions-fix

e2f41a0

update variable names to be simpler and more comprehensive

94dc27d

revert

6e54ba0

Merge branch 'main' into anthony/canvas-dimensions-fix

1851d53

fix

10417fe

add alert cap

4d12f5d

anth0nycodes changed the title ~~fix: canvas dimensions~~ fix: responsive canvas dimensions for static and infinite scroll pages Mar 11, 2026

updated cap and added another condition

e11a97e

anth0nycodes requested a review from Copilot March 11, 2026 02:35

anth0nycodes self-assigned this Mar 11, 2026

anth0nycodes added the enhancement New feature or request label Mar 11, 2026

Copilot started reviewing on behalf of anth0nycodes March 11, 2026 02:36 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

anth0nycodes and others added 2 commits March 10, 2026 23:06

remove redundant check

5548349

Merge branch 'main' into anthony/canvas-dimensions-fix

f2293ba

anth0nycodes requested a review from Copilot March 12, 2026 04:45

Copilot started reviewing on behalf of anth0nycodes March 12, 2026 04:46 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

Merge remote-tracking branch 'origin' into anthony/canvas-dimensions-fix

212ab56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: responsive canvas dimensions for static and infinite scroll pages#27

fix: responsive canvas dimensions for static and infinite scroll pages#27
anth0nycodes wants to merge 13 commits intomainfrom
anthony/canvas-dimensions-fix

anth0nycodes commented Mar 8, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Copilot AI Mar 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-      updateCanvasHeight(fc);
+      const viewportHeight = document.documentElement.clientHeight;
+      const currentHeight = fc.getHeight();
+      const desiredHeight = Math.max(currentHeight, viewportHeight);
+      const newHeight = Math.min(CANVAS_MAX_HEIGHT_IN_PIXELS, desiredHeight);
+      if (newHeight !== currentHeight) {
+        fc.setHeight(newHeight);
+        fc.renderAll();
+      }

Conversation

anth0nycodes commented Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Change Summary + Media (if applicable)

Context

Summary

How the collapse-and-measure approach works

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

anth0nycodes commented Mar 8, 2026 •

edited

Loading