How a Default 300px Canvas Width Broke a React Image Editor Layout

A developer building a browser-based image masking tool discovered that the editor was rendering inside a narrow 300px strip instead of using the full available workspace width. The root cause was that the canvas wrapper element had no declared width, so it collapsed around the HTML canvas element's browser default size of 300×150 pixels. The initialization code measured the wrapper's clientWidth at that point, receiving roughly 300px and using it as the basis for all three stacked canvases. The fix involved adding a single CSS utility class — w-full — to the wrapper, forcing it to resolve against the true workspace width before any canvas sizing logic ran. The developer also noted that stretching canvas elements via CSS alone would have misaligned the internal bitmap coordinate system, so both the display size and bitmap dimensions needed to match.