It's the core of a tattoo preview tool I just launched, where the user places the design on their own arm before anything else happens. Early analytics are tiny (13 visitors in the first days), but the average visit was nearly 11 minutes, and a big part of the app is this editor. So it seemed worth writing up how this kind of editor can be put together. It's mostly not hard. It's just a lot of small details.

Use Pointer Events, not mouse plus touch

Pointer Events cover mouse, pen and touch with one API, and every finger gets its own pointerId. That's exactly what you need for multi-touch, and you skip maintaining two sets of handlers.

Two bits of setup matter. Put touch-action: none on the stage element; otherwise, mobile browsers scroll and zoom the page while the user pinches. And call setPointerCapture(e.pointerId) on pointerdown, so moves keep arriving when a finger slides off the image.

Keep active pointers in a Map keyed by id. Remove them on pointerup and also on pointercancel, which fires when the OS takes over a touch. If you only handle pointerup, a stale entry can stay in the map and the next drag gets treated as a pinch.

State is four numbers

x and y for the overlay's center in photo pixels, scale, and angle in radians. Store the center, not the top-left corner. Then rotation and zoom pivot around the middle, which is what people expect without thinking about it.

DOMMatrix turns that into a CSS transform and can also invert itself, which you'll want for hit testing:

const toMatrix = ({ x, y, scale, angle }) =>
  new DOMMatrix()
    .translateSelf(x, y)
    .rotateSelf(angle * 180 / Math.PI)
    .scaleSelf(scale);

Set transform-origin: 0 0 on the overlay and offset it by half its size, or the center won't land on x, y.

I'd recommend not adding small deltas on every pointermove. Floating-point error accumulates. A cleaner approach is to snapshot the state and finger positions when a gesture starts and compute everything from that snapshot. When a finger is added or lifted, take a new snapshot.

Two-finger math

The line between the two fingers tells you everything:

function pinch(start, a, b) {
  const dist = Math.hypot(b.x - a.x, b.y - a.y);
  const ang = Math.atan2(b.y - a.y, b.x - a.x);
  return {
    x: start.x + ((a.x + b.x) / 2 - start.midX),
    y: start.y + ((a.y + b.y) / 2 - start.midY),
    scale: Math.max(0.05, start.scale * dist / start.dist),
    angle: start.angle + (ang - start.ang),
  };
}

The distance ratio is zoom, the change in angle is rotation, and the midpoint moving is a pan. All three apply at once, which is why it feels natural. One caveat that's true of this math in general: when the fingers are very close, small movements make the angle noisy. A small dead zone is the usual fix, though it can feel sticky if it's too big.

On desktop there's no second finger, so a corner handle can do the same job by using the overlay's center as the fixed point. My opinion: a visible handle beats wheel-plus-modifier shortcuts, because nobody has to be told it exists.

For hit testing a rotated overlay, map the pointer through the inverse matrix into the overlay's own coordinates and compare against half its width and height. A plain bounding box gets the corners wrong as soon as anything is rotated.

Exporting so the screen size doesn't matter

Whatever uses the placement afterwards shouldn't care how big the user's screen was. Export normalized values: center divided by the photo's natural size, scale relative to photo width, angle in radians. Then you can redraw the composite at any resolution.

If you redraw on a canvas, use the same order as the CSS transform: translate, rotate, scale. Mix those up and the exported image won't match what the user saw. Generally it's safest to have preview and export share a single drawing function.

I did something similar on a little lettering preview page, which renders text in different fonts to a transparent PNG. Funnily enough, that page is what Google noticed first. The site's first search impressions, on Oct 19, were for "tattoo design font generator" and "tattoo text font generator", at an average position of 24.8. Not the editor I'm writing about here. Fine.

Keeping it smooth

Pointer events can fire faster than the screen refreshes, so store the latest state and apply it once per frame in requestAnimationFrame. Move the overlay with CSS transforms rather than redrawing a full-size phone photo on every move, which gets laggy fast. Show a downscaled copy of the photo while editing and keep the original for export. And put will-change: transform on the overlay only.

The rest is unglamorous. Handles need touch targets big enough for a thumb. You'll want to keep the overlay from being dragged completely off the photo, because someone will do it. That stuff takes longer than the trigonometry, which is a bit unfair but true.