Image Overlay
Layer one image on another with opacity and blend modes.
Image Overlay layers one image on another with opacity and blend modes — the card's description in full. Two prompts guide the inputs ("Select the base (background) image:" and "Select the overlay image:"), then Opacity % (default 80), Scale % (default 100), Blend Mode, and Position shape the composite.
Twelve blend modes are available — Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion — and positions cover Center, the four corners, and Tile for repeating patterns. The result keeps the base dimensions (overlay is composited, never expands the canvas). All of it is local Canvas 2D compositing.
How it works
The canvas is sized to the base image and the base is drawn first. Then globalAlpha is set to opacity/100 and globalCompositeOperation to the chosen blend mode; the overlay is scaled by scale/100 and drawn either at a corner/center position or, in Tile mode, in a loop across the whole canvas.
Export runs toBlob — PNG for PNG sources, otherwise JPEG at quality 0.92 under the base filename. State lives in Redux overlaySlice; "Cancel" clears during a second upload; "Apply Overlay" toasts "Overlay applied!" or "Error applying overlay". No network or AI is involved.
How to use
- Drop the base (background) image at "Select the base (background) image:".
- Drop the overlay image at "Select the overlay image:" ("Cancel" aborts the second pick).
- Adjust Opacity % (0–100, default 80) and Scale % (10–200, default 100).
- Choose Blend Mode from the twelve options (Normal through Exclusion).
- Choose Position: Center, Top Left, Top Right, Bottom Left, Bottom Right, or Tile.
- Click "Apply Overlay" (label becomes "Applying...").
- Compare Base vs Result sizes (they match — canvas follows the base), then Download or "Start Over".
Tips
- Tile mode repeats the scaled overlay across the canvas — the quick path for repeating watermarks and patterns.
- Multiply darkens and Screen lightens — the go-to pair for light-leak and texture blending.
- Scale below 100 shrinks the overlay; above 100 enlarges it, with anything past the canvas bounds cropped.
- The result always keeps the base image's dimensions because the overlay is composited, not used to grow the canvas.
- Opacity 0 makes the overlay fully transparent — effectively the base image again.
Image Overlay FAQ
Which image defines the output size?
The base (background) image — the overlay is drawn onto a canvas of the base's dimensions.
Can I tile a small logo?
Yes — set Position to "Tile" to repeat the scaled overlay across the canvas.
How many blend modes are there?
Twelve, including Multiply, Screen, Overlay, Difference, and Exclusion.
Is either image uploaded?
No — canvas compositing with globalCompositeOperation runs entirely locally.
What does Opacity 0 do?
The overlay becomes fully transparent, leaving essentially the base image.
Credits
- Canvas 2D API — globalCompositeOperation blend modes and alpha compositing