Building a Browser-Based Image Rotate & Flip Tool with Canvas API

Rotating an image sounds trivial — until you need the output canvas to fit the rotated image exactly, handle arbitrary angles, and combine rotation with horizontal/vertical flipping in any order. Here's how we built the Image Rotate tool at Ultimate Tools using Canvas API, with CSS preview transforms for instant feedback and a separate canvas export path for the actual download. Two Rendering Paths The component uses two separate rendering strategies: Preview — CSS transform on an <img> tag. Instant, no canvas involved: const previewTransform = [ `rotate(${normalizedDeg}deg)`, flipH ? "scaleX(-1)" : "", flipV ? "scaleY(-1)" : "", ].filter(Boolean).join(" "); <img style={{ transform: previewTransform }} /> Export — Canvas API, runs only on download. This is where the real math happens. Why split them? CSS transforms are free — they run on the GPU and update on every slider tick with zero lag. Canvas re-draws are heavier, especially for large images. Only computing the canvas