Sometimes you need two images on one canvas — a screenshot next to a phone mockup, a logo over a photo, two halves of a before/after, a watermark on a hero shot. This tool lays both onto a canvas you control: pick the canvas size and background, drag each image where you want it, scale each independently, then export. Runs entirely in your browser via Canvas, no upload.
How combining works
The canvas is your output. Set its dimensions (or pick an aspect-ratio preset) and its background — solid colour or transparent. Both images are placed on the canvas in their natural pixel dimensions at a default fit-within scale, centred. From there each layer is independently draggable (pointer events) and independently scalable (5–300% multiplier on its natural size).
When you click Combine, the tool renders the canvas at exactly its source dimensions and draws each layer with ctx.drawImage(bitmap, x, y, scaledWidth, scaledHeight). The on-screen surface is a scaled preview that preserves the canvas aspect ratio exactly — what you see is what you get, just at smaller display pixels.
Canvas presets
| Preset | Ratio | Common use |
|---|---|---|
| Free | any | Custom dimensions, posters, banners with specific pixel targets |
| 1:1 | square | Instagram square, profile collages, avatar composites |
| 4:3 | classic | Old monitors, presentation slides |
| 16:9 | widescreen | YouTube thumbnails, hero banners, video stills |
| 9:16 | vertical | Stories, Reels, TikTok, mobile-first verticals |
Picking a preset locks the aspect — typing a new width updates the height automatically (and vice versa). Free mode lets you set both dimensions independently.
Example: phone mockup with a screenshot
Drop the phone mockup as image A and your screenshot as image B. Pick a 9:16 canvas at 1080×1920 (story format). Drag the mockup to position, then drag the screenshot over the screen area — scale it with the B slider until it fills the mockup’s display. Toggle A-on-top so the mockup bezel sits above the screenshot. Combine, export PNG.
Example: before / after collage
Two photos at the same size, side by side on a 16:9 canvas. Drop the “before” as A and “after” as B. Pick 16:9 at 1920×1080. Re-centre A and shrink to 50% scale — drag to the left half. Re-centre B and shrink to 50% — drag to the right half. White background, export JPG.
Example: logo watermark on a hero photo
Drop the photo as image A and the logo PNG as image B. Pick Free, type the photo’s width and height. Toggle Transparent off (you want the photo as background, not the canvas itself). Set background colour to anything — it will be entirely covered by A. Scale B down to ~15% and drag to a corner. Combine, export PNG to keep the logo’s transparency edges crisp.
When to combine with other tools
- Need to crop first? Run each image through the image cropper, then combine.
- Need a specific output size that differs from canvas? Combine first, then run through the image resizer.
- Final output too large? Combine first, then compress to drop the file size.
Common mistakes
Picking a canvas smaller than the images. Both layers default to fit-within (never enlarged), so if your canvas is 800×800 and image A is 4000×3000, A starts at scale ≈0.2 to fit. That’s fine for preview but the export resamples down — no path back to the original resolution. If full resolution matters, set the canvas at least as large as the larger layer.
Expecting JPG with transparency. JPEG has no alpha channel — the JPG option is disabled when Transparent is on. Either pick a background colour (then JPG is available) or accept PNG (which preserves transparency).
Scaling past 100% and expecting it to be sharp. Past natural size, the browser upsamples — expect softness from ~150% onward. For sharper enlargements, source a higher-resolution version of the image.
Dragging a layer off-canvas and losing it. Layers can drift past canvas edges (that’s the point — sometimes you want partial overlap with the edge). If you lose one off-screen, click Re-centre on its slider to snap it back.
What this tool does not do
It doesn’t rotate or flip. Pre-rotate via your image editor or use the image cropper which respects EXIF orientation.
It doesn’t mask, blend, or apply filters. Each layer is drawn opaque (or with its own transparency, for PNGs) — no blend modes, no opacity slider per layer, no feathered edges.
It doesn’t stack more than two images. Two layers is the v1 scope; three+ moves into compositor territory.
It doesn’t upload anywhere. All composition runs client-side via Canvas (and pdf-lib for PDF output, also client-side). To convert the combined output to a different image format, the image format converter is the follow-up; to merge the PDF with other PDFs use the PDF merger.