How I Built a Privacy-First Height Comparison Tool That Runs Entirely in the Browser

#javascript #webdev #privacy #showdev

Ever argued with a friend about who's taller? Or wondered how you'd look standing next to your favourite actor? I kept running into this, and most height comparison sites I tried either felt cluttered or uploaded my photos to a server. So I built HeightCanvas, a free height comparison tool that runs entirely in the browser.

Here's what I learned building it.

The core problem: one baseline, one scale

A height comparison only works if every figure stands on the same baseline and uses the same proportional scale. That sounds obvious, but it's where most quick implementations break:

Every subject is drawn from the floor up, never centered vertically.
The scale is computed from the tallest subject in the chart, so adding a 216 cm basketball player and a 100 cm child still keeps both readable.
When subjects change, the scale recalculates automatically, so small differences (like 5 cm) stay visible instead of getting squashed.

Units without the headache

Users think in different units. Some type 180 cm, others 5'11". Internally I store everything in centimetres and only convert for display:

const cmToFtIn = (cm) => {
  const totalIn = cm / 2.54;
  const ft = Math.floor(totalIn / 12);
  const inch = Math.round(totalIn - ft * 12);
  return inch === 12 ? `${ft + 1}' 0"` : `${ft}' ${inch}"`;
};

Storing one canonical unit removes a whole category of rounding bugs. The tool then shows the exact difference at the top (for example, "Alex is 15 cm (6 in) taller") so nobody has to do the subtraction themselves.

Privacy by design

Users can upload their own photo to place in the chart. Instead of sending it anywhere, the image is read locally with the HTML5 File API and never leaves the device. No account, no server upload, no tracking of personal images. For a tool people use with selfies and couple photos, this felt non-negotiable.

Sharing without a backend

Two ways to share a result:

Export as HD PNG, rendered client-side.
Share via URL, where the chart state (names, heights, colours) is encoded in the link, so the recipient sees the exact same comparison.

No database needed for either.

Ready-made comparisons

Blank tools can feel empty, so I added a library of celebrity heights and pre-built pages like Ronaldo vs Messi, LeBron vs Curry, and Shah Rukh Khan vs Salman Khan. They double as examples of what the tool can do.

Try it

👉 heightcanvas.com: compare two or more people, couples, celebrities, or objects in cm, m, or ft/in.

I'd love feedback from other devs, especially on the scaling logic and mobile UX. What would you add?

DEV Community