Inside a browser-based photo collage maker

One rectangle model keeps CSS and canvas aligned

CSS Grid could arrange the live editor, but reproducing its automatic placement independently on an export canvas would invite small differences. Instead, each template defines column and row spans that one function converts into x, y, width and height rectangles for any target size. CSS positions the preview cells from those numbers; canvas uses the same geometry at export resolution. Rounding and browser rendering can still affect edge pixels, but the shared model removes a major source of layout drift.

Editing favors CSS; downloading uses canvas

Rendering a large canvas after every movement of a spacing or zoom control would waste work, especially with nine photographs. The editor therefore uses absolutely positioned elements, CSS filters and border-radius clipping that the browser can update responsively. Downloading starts a separate Canvas 2D render at the chosen resolution. Its ctx.filter property accepts the corresponding filter syntax, although CSS and canvas output should still be visually tested across supported browsers rather than assumed pixel-identical.

Each photograph keeps its own visual settings

A single filter over the finished collage would force bright outdoor pictures and dim indoor shots into the same treatment. Here, every photo stores its own preset plus brightness, contrast and saturation adjustments. Selecting a cell changes which settings the panel edits while leaving the other photographs and the grid untouched.

Distinct presets require more than distinct numbers

A CSS preset is a short group of brightness, contrast, saturation, sepia, grayscale, hue and sometimes blur values. Dozens of numerical combinations can still look nearly alike. The useful work was separating related looks enough to recognize them without destroying the intended family resemblance. Large hue rotations were especially misleading: they wrap around the color wheel and could push blue skies toward magenta instead of making a scene feel cooler. Conservative shifts suit natural warm and cool presets; aggressive shifts belong in deliberately stylized effects.

Grain needs a texture layer of its own

Brightness, contrast and saturation change tone but do not create the fine texture associated with film grain. Presets that call for that look receive a low-opacity layer of randomized pixel noise during rendering. Generating the texture at that moment avoids shipping a separate asset and reduces obvious repetition, though every export may contain a different noise pattern.

Native drag and drop handles reordering

Photo swaps use the browser’s dragstart, dragover and drop events, the same family of events used by Orisod’s page-reordering tools. This keeps the interaction small and maintainable, although native drag behavior and accessibility can vary among pointer, touch and keyboard environments.

A few implementation details

The native CSS and Canvas filter vocabulary covers brightness, contrast, saturation, sepia, grayscale, hue rotation and blur. Effects outside that set need another rendering step; grain, for example, is composited as a texture instead of inserted into the filter string.

Zoom and pan belong to individual photos because each cell needs its own crop framing. The stored scale and center coordinates travel with that photo even if the grid changes, without moving the framing of other cells.

A larger export uses the same rectangle and filter parameters at a bigger target size, but it is rendered through canvas rather than the preview’s DOM and CSS path. Calling the two results pixel-identical would be too strong; the goal is consistent composition at the requested resolution.

The current background is a solid CSS and canvas fill. Gradients or images would need additional sizing, positioning, cropping and export rules beneath every cell, so they remain a separate feature rather than an implied capability.

The central design choice is simple: share the layout model, not every rendering operation. CSS keeps editing responsive, canvas creates the downloadable image, and per-photo state preserves independent framing and color adjustments.