Upload Images

Supports JPG, PNG, WebP, GIF. Upload multiple files at once.

Canvas & Layout
Grid & Guides
Selected Layer
No layer selected. Click an image in the canvas.
Z-Order & Transform
Layers (topmost first)

No layers yet. Upload images to get started.

Keyboard Shortcuts
  • Drag image to move on canvas
  • Corner handle: resize proportionally
  • Alt + scroll wheel: rotate
  • Shift + scroll wheel: scale
  • Arrow keys: move 1px (Shift: 10px)
  • Delete / Backspace: remove layer
  • g auto-layout  |  f fullscreen
  • Ctrl+Z undo  |  Ctrl+Shift+Z redo
  • Double-click canvas: toggle fullscreen
Canvas Preview
Canvas Info
Background
#247DEB
Aspect
4 : 3
Resolution
1200 × 900 px
Layers
0 images
Layer Area Chart
Composition Statistics
Upload images to see composition statistics.
Actions & Export
Download

When checked, only the selected layer is drawn, cropped and isolated.

Session

Session JSON contains canvas config (size, bg, padding, gap, radius) and layer positions/transforms for full reproducibility. Note: image data is NOT included — re-upload images after loading a session.

Standards & Guidelines
HTML5 Canvas API (W3C)

HTML Living Standard — Canvas 2D Context: Defines the <canvas> element and its 2D rendering context, including drawImage(), affine transforms (translate, rotate, scale), compositing (globalAlpha, globalCompositeOperation), pixel manipulation (getImageData, putImageData), and blob export (toBlob, toDataURL).

All rendering in this tool uses the Canvas 2D API — no WebGL, no external libraries.

PNG Format (W3C PNG Specification)

Portable Network Graphics (PNG), 2nd edition (ISO/IEC 15948:2003): Lossless raster image format supporting 8/16-bit RGBA, interlacing, gamma correction, and ICC profile embedding. PNG is the default export format for lossless collage output with transparency.

Canvas toBlob() produces standard PNG when type is 'image/png'.

JPEG Format (ISO/IEC 10918, ITU-T T.81)

JPEG (Joint Photographic Experts Group): Lossy compression format using DCT (Discrete Cosine Transform) with configurable quality factor. JPEG does not support transparency — alpha is composited against the canvas background colour.

Quality parameter maps to Canvas toBlob(cb, 'image/jpeg', quality) where quality ranges 0.0–1.0. 0.90 is typically visually lossless.

sRGB Colour Space (IEC 61966-2-1)

IEC 61966-2-1:1999: sRGB is the default colour space for Canvas 2D rendering. All pixel colours are assumed sRGB unless an ICC profile is embedded. Background colour, exported PNGs, and JPEG outputs are all sRGB.

Fullscreen API (W3C)

Fullscreen API: Allows a single element to be displayed fullscreen. Used for immersive canvas preview. Exit via Esc key or API call.

Pointer Events (W3C)

Pointer Events Level 2: Unified input model for mouse, touch, and pen. This tool uses pointerdown, pointermove, pointerup for all canvas interactions (drag, resize, select) — works across desktop and mobile.

Clipboard API (W3C)

Async Clipboard API: navigator.clipboard.write() with ClipboardItem permits copying PNG blobs to the system clipboard. Falls back to writeText() for JSON/text content.

Composition Rules (Rule of Thirds, Golden Ratio)

Rule of Thirds: Divides the canvas into a 3×3 grid. Key compositional elements placed at grid intersections create dynamic, balanced compositions. Widely used in photography, film, and graphic design.

Center guides: Vertical and horizontal center lines assist with symmetrical placement and alignment.

Formulas & Mathematics
2D Affine Transforms (Canvas API)
Translation:
x′ = x + tx
y′ = y + ty

Rotation about centre (cx, cy):
translate(cx, cy) → rotate(θ) → draw at (-w/2, -h/2)
x′ = cx + (x−cx)cosθ − (y−cy)sinθ
y′ = cy + (x−cx)sinθ + (y−cy)cosθ

Scaling:
w′ = baseW × scale
h′ = baseH × scale

Flip (mirror):
Horizontal: ctx.scale(−1, 1)
Vertical: ctx.scale(1, −1)

Combined transform matrix [a b c d e f]:
| a c e | | cosθ·sx −sinθ·sy tx |
| b d f | = | sinθ·sx cosθ·sy ty |
| 0 0 1 | | 0 0 1 |
Auto Grid Layout Algorithm
n = number of visible layers
cols = ⌈√n⌉
rows = ⌈n / cols⌉

cellW = (canvasW − 2×pad − (cols−1)×gap) / cols
cellH = (canvasH − 2×pad − (rows−1)×gap) / rows

For layer i (0-indexed):
col = i mod cols
row = ⌊i / cols⌋
cx = pad + col×(cellW + gap) + cellW/2
cy = pad + row×(cellH + gap) + cellH/2
scale = min(cellW/baseW, cellH/baseH, 1)
Aspect Ratio & Resolution Scaling
Given aspect ratio W:H and base width B=1200:
canvasW = B × resScale
canvasH = (B / (W/H)) × resScale

Preset ratios:
1:1 → 1200×1200
4:3 → 1200×900
3:4 → 1200×1600
16:9 → 1200×675
9:16 → 1200×2133

Coverage:
coverage% = (∑ layeri w×h) / (canvasW×canvasH) × 100
Hit Testing (Point-in-Rotated-Rectangle)
To test if point (px, py) is inside a rotated layer:

1. Translate to layer centre: dx = px − cx, dy = py − cy
2. Inverse-rotate: lx = dx·cos(−θ) − dy·sin(−θ)
              ly = dx·sin(−θ) + dy·cos(−θ)
3. Test bounds: |lx| ≤ w/2 AND |ly| ≤ h/2

Corner resize handles:
Apply same inverse rotation for each corner point.
Distance threshold: |px − corner_x| < 2×HANDLE
Resize: new scale = dist(mouse, centre) / (diagonal/2)
Image Export Pipeline
PNG export:
canvas.toBlob(callback, 'image/png')
→ Blob → Object URL → <a download>.click()
Preserves alpha channel (transparency).

JPEG export:
canvas.toBlob(callback, 'image/jpeg', quality)
quality ∈ [0.0, 1.0]. No alpha — transparent pixels composite
against bgColor or white.

Clipboard (PNG):
canvas.toBlob → new ClipboardItem({'image/png': blob})
→ navigator.clipboard.write([clipboardItem])

Session JSON:
{version, canvas:{w,h,bg,...}, layers:[{id,name,cx,cy,...}]}
No image data — layer references only. Re-upload required.
References & Citations

Canvas & Rendering Standards

[1] W3C — HTML Living Standard, Canvas 2D Context.

[2] W3C — Pointer Events Level 2 (unified mouse/touch/pen).

[3] W3C — Fullscreen API.

[4] W3C — Async Clipboard API (ClipboardItem, navigator.clipboard.write).

Image Formats

[5] ISO/IEC 15948:2003 — Portable Network Graphics (PNG), 2nd edition.

[6] ISO/IEC 10918-1 / ITU-T T.81 — JPEG baseline lossy compression.

[7] IEC 61966-2-1:1999 — Default RGB colour space (sRGB).

Composition & Layout

[8] Rule of Thirds — Classical photography and graphic design grid composition.

[9] Golden Ratio (φ ≈ 1.618) — Proportional guideline used in visual aesthetics.

[10] Affine transformations — 2D matrix operations: translate, rotate, scale, flip.

Session & Serialisation

[11] ECMA-404 — The JSON Data Interchange Standard (session export format).

[12] Canvas toBlob / toDataURL — W3C blob export for PNG & JPEG.

General Resources

[13] MDN Web Docs — Canvas API, CanvasRenderingContext2D reference.

[14] Poynton, C.A. (2012) — Digital Video and HD: Algorithms and Interfaces (2nd ed.).

About this tool

This tool provides a research-grade multi-image canvas editor with drag/resize/rotate, layer management, smart grid auto-layout, 5 aspect ratios, snapping & guides, undo/redo, fullscreen preview, and PNG/JPEG/JSON export — entirely client-side (zero network). Not a substitute for professional design software or ICC-managed workflows.

Research & Visualization
Bootstrap Coverage Distribution
Click Run Bootstrap to compute coverage confidence intervals.
Batch Layout Analysis

Enter one layout config per line as JSON objects (max 50). Computes coverage % for each layout.

Click Run Batch to analyse layouts.
Research backend: Multi-image canvas · drag/resize/rotate · grid auto-layout · layer management · bootstrap coverage CIs · batch layout analysis · PNG/JPEG/JSON export. All computation on-device.