Build Shots.so

The build, in order

1. 1

   Image input and render loop

   hideshow

   Three ways in, one render function, correct on HiDPI from the start.

   1. 1.1Create index.html with a canvas, a sidebar and one state object

      state = { image, padding, radius, shadow, background, ratio, scale }. Every control writes to state and calls render(). Exactly one render function; two code paths drawing to the canvas is the classic bug here.

      Files index.html

   2. 1.2Wire drag-and-drop, paste and a file picker

      paste: read clipboardData.items for an image type. All three create an Image from a Blob URL and set state.image.

   3. 1.3Handle devicePixelRatio in render()

      Backing store = css size times devicePixelRatio; ctx.scale once. Retrofitting this later means re-tuning every offset.

   done when · tick each as it passes

   • All three input paths load the same image identically
   • The render is crisp on a HiDPI display
   • A 5000px-wide screenshot loads without freezing the page

   next phase
2. 2

   Geometry controls

   hideshow

   Padding, radius and shadow as live sliders whose export matches the preview.

   1. 2.1Add the three sliders

      Range inputs bound to state; render on input.

   2. 2.2Clip rounded corners with a real path

      ctx.roundRect and clip, not a CSS overlay, or the export will not match the preview. Draw the shadow with canvas shadow properties on the clipped shape.

   done when · tick each as it passes

   • Every slider updates the preview within one frame
   • Corners are genuinely transparent at the edges
   • The shadow follows the rounded shape, not the bounding box

   next phase
3. 3

   Backgrounds

   hideshow

   Ten presets that look premium before anyone touches anything.

   1. 3.1Add a preset picker with gradients, multi-stop meshes and solids

      Plus a custom colour input and a transparent option.

   2. 3.2Make the default the best one

      Most users never change it.

   done when · tick each as it passes

   • Every preset renders correctly at every ratio
   • The transparent option exports a PNG with a real alpha channel

   next phase
4. 4

   Canvas ratios

   hideshow

   Fit without cropping or distortion.

   1. 4.1Add the ratio selector: original, 16:9, 4:3, 1:1 and 2:1

      Store it in state; a change triggers one render().

   2. 4.2Fit the image inside the padding without cropping and centre it on both axes

      Compute the scale as the minimum of available width over image width and available height over image height. Never crop, never distort.

   done when · tick each as it passes

   • Switching ratios never crops the screenshot
   • A very tall screenshot fits inside a 16:9 canvas
   • The image stays centred

   next phase
5. 5

   Export

   hideshow

   Sharp PNG at 1x and 2x, and clipboard that works in both engines.

   1. 5.1Export by rendering to an offscreen canvas at the target scale

      Never upscale the preview bitmap.

   2. 5.2Copy to clipboard the portable way

      Pass a Promise resolving to a Blob into ClipboardItem; Safari requires the promise form and Chromium accepts it. Call navigator.clipboard.write synchronously inside the click handler.

   done when · tick each as it passes

   • The 2x export is exactly twice the pixels and visibly sharper
   • The exported file matches the preview pixel for pixel in layout
   • Paste works in both Safari and a Chromium browser

   next phase
6. 6

   Polish

   hideshow

   Shortcuts, an empty state, memory, offline.

   1. 6.1Add keyboard shortcuts, reset, and remembered settings in localStorage wrapped in try/catch
   2. 6.2Write the empty state and a visible nothing-is-uploaded note
   3. 6.3Confirm offline: no external requests at all

      Open DevTools > Network, reload with Offline checked.

   done when · tick each as it passes

   • The page works with the network disabled
   • A first-time user knows what to do without instructions

   next phase