PixieR Project Devlog — Fixing the Stretching Bug & Other Issues

1. Compare Slider stretching (main issue)

Cause: syncCmpCanvas() set cmp.style.width='100%' and cmp.style.height='100%' together with objectFit:'contain'. object-fit only works on replaced elements like <img> and <video> — it has no effect on <canvas>, so the canvas was forced to fill the wrapper’s full 100% x 100% box regardless of its actual pixel aspect ratio, stretching the pixel art.

Fix: Compute the display size manually based on the pixel canvas’s own aspect ratio (src.width / src.height), fit it within the wrapper width and a max height of 400px, then explicitly set cmp-canvas and cmp-orig-img width/height in pixels (with horizontal centering via marginLeft). Both layers now share identical dimensions so the slider overlay aligns correctly.

1. Pixel Only view overflow/stretch

Cause: solo-canvas had a fixed inline max-width:100%;max-height:480px, while syncSoloCanvas() separately set style.width/style.height to width*zoom/height*zoom in px. At high zoom levels this could overflow the frame, and the max-width/max-height constraints distorted the aspect ratio independently on each axis.

Fix: Removed the conflicting inline max-width/max-height. syncSoloCanvas() now computes the zoomed size, then uniformly scales both dimensions down by the same factor if it exceeds the frame’s width or a 480px height cap, preserving aspect ratio.

1. Eyedropper coordinate mismatch

Cause: pixelCanvas mousemove/click handlers divided mouse coordinates by the zoom slider value to find the pixel under the cursor. This breaks if the canvas’s rendered size ever differs from width * zoom (e.g. after future layout changes), giving wrong color picks.

Fix: Replaced the zoom-based division with a ratio of the canvas’s actual bitmap size to its rendered bounding box size (pixelCanvas.width / rect.width), which is robust to any CSS scaling.

1. Compare slider not resizing on window resize

Cause: No resize handler existed for the compare/pixel-only views, so resizing the browser left stale dimensions and a stretched look.

Fix: Added a resize listener that re-runs syncCmpCanvas() or syncSoloCanvas() depending on the active view.

1. Dead/unused popup duplication

Cause: The star popup markup was hardcoded in the page AND re-inserted via createPopupHTML() using insertAdjacentHTML, creating a duplicate #starPopup risk and unnecessary DOM bloat.

Fix: Removed the redundant insertAdjacentHTML injection since the markup already exists in the page; createPopupHTML() now just guards against duplicates.

1. Toast fallback dead code

Cause: showToast() inside the popup IIFE recreated a whole second #toast element with inline styles if the existing one wasn’t found — but it always exists in the page, making this branch dead and bug-prone (it referenced var(--text, ...) colors that may not exist).