Designing a HUD on a black rectangle is awkward when the HUD will sit over a bright game scene. The UI Builder's canvas now has a color and a picture behind your UI.

A naming mix-up first

The only swatch the builder had changed the area around the display, not the display itself. It's now called Workspace color, and the new Canvas section handles the display. Click the empty canvas, or pick the ScreenGui in Layers, and the Inspector shows Color, Picture, Fit (Fill, Fit, Stretch, Tile), Darken and Around.

You can choose a file, drop one on the box, or paste a screenshot with Ctrl+V.

Design only, never exported

The backdrop is for designing. It is never exported, put on a shared page or sent to the AI tools. roblox_ui_get_project leaves the picture out and says one exists. It isn't an undo step either, like the zoom. Undo snapshots leave the display out entirely so a large picture isn't copied sixty times.

The picture stays on your machine

The picture is not uploaded to Roblox and needs no connection. It's opened in the browser, shrunk to 2048px on its long side and kept in the project as a small WebP. A 1920 x 1080 screenshot is typically 20 to 300 KB, and a hard limit of about 2.2 MB shrinks it further. It comes back with your account save and the downloaded project file. SVGs, files over 25 MB and anything the browser can't open are refused, with a reason.

How it's organised

The rules are pure functions in canvas-backdrop.js with their own tests. The file handling and painting live in backdrop-picture.js, and the Inspector section in canvas-panel.js. The backdrop shows on the editing canvas, the Compare screens, the view cards and Overview.