How to Use MetricCanvas

Step 1 — Upload your image

Click the upload area in the left sidebar or drag and drop one or more images directly onto the canvas. MetricCanvas supports multiple images at once, each placed on its own layer on the infinite canvas.

Once uploaded, you can pan around the canvas by clicking and dragging (or using the Pan tool from the toolbar), and zoom in or out with the scroll wheel or the zoom buttons. Images can be repositioned freely — the canvas has no fixed edges.

If you are working with a high-resolution scan, zoom in to the area where you will draw your calibration line before calibrating. The more precise your calibration click, the more accurate all derived measurements will be.

Step 2 — Calibrate the scale

Calibration is the key step. Select the Calibrate tool from the toolbar, then click two points in the image that correspond to a known real-world distance. A dialog will ask you to enter that distance and choose your unit (meters, centimeters, feet, inches, or any custom unit).

You have two calibration modes:

• Line — click two endpoints of a straight segment whose length you know. Best for walls, corridors, and linear features.
• Diameter — click the two ends of a circular object's diameter. Useful for pipes, columns, or any circular feature with a known size.

After saving, the scale is set. MetricCanvas will use this reference to convert pixel distances into real-world values for every subsequent measurement on that image.

Tip: Use the longest identifiable reference you can find in the image. A 10 m reference line will be more accurate than a 0.5 m one, because small errors in click placement have a proportionally smaller effect.

Step 3 — Measure distances

Select the Measure tool and click two points in the image. MetricCanvas draws a line between them, calculates the real-world distance based on your calibration, and displays the result as a label directly on the canvas.

You can add as many measurements as needed. Each one is listed in the Measurements panel in the sidebar, where you can rename it to something descriptive (for example, "Kitchen width" or "Corridor to bedroom door").

Labels can be repositioned by switching to the Select tool and dragging. If you need to re-measure something, simply delete the old measurement from the sidebar and draw a new one.

Step 4 — Manage layers

Every image you upload becomes a separate layer. The Layers panel in the sidebar shows all layers in the current session. You can toggle visibility on or off for each layer, and reorder them by dragging.

Layers are useful when you want to overlay multiple images — for example, a floor plan alongside a reference photo of the same space — or when comparing different versions of the same drawing.

Step 5 — Export your work

When you are done measuring, the Export panel offers three output formats:

• PNG — exports the entire canvas as a full-resolution annotated image, including all measurement lines and labels. Useful for sharing with colleagues or including in reports.
• CSV — exports all measurements as a spreadsheet-compatible table, with label, pixel distance, real-world value, and unit columns. Ideal for importing into Excel, Google Sheets, or any data pipeline.
• TXT — exports measurements as plain text, one per line. Useful for quick notes or pasting into a document.

All exports are generated entirely in your browser. Nothing is uploaded to any server.

Undo, redo, and session persistence

MetricCanvas maintains a full undo/redo history during your session. Use the Undo and Redo buttons in the toolbar or the standard keyboard shortcuts (Ctrl+Z / Ctrl+Y on Windows, Cmd+Z / Cmd+Shift+Z on Mac).

Your session is automatically saved in your browser's local storage. If you close the tab and return later, your canvas — including all images, calibrations, and measurements — will be restored exactly as you left it.

To start fresh, use the Reset Canvas button. This clears all layers and measurements from the current session.

Working with multiple images

You can upload several images in one session and keep them arranged on the same canvas. Each image has its own layer and can have its own calibration. This is useful when you are working with images at different scales — for example, a site plan and a detailed floor plan of one unit.

Measurements are always drawn on the currently active layer. Make sure you select the correct layer before measuring if you have multiple images open.

How the math works

MetricCanvas uses a straightforward ratio: once you establish a scale from one known reference, every pixel distance in the image can be converted to a real-world value. The core formula is:

Where pixel_distance is the Euclidean distance between your two calibration clicks:

Every subsequent measurement follows the same pattern:

This means scale propagates linearly: if one wall calibrates the image, every other distance — doors, windows, diagonal spans, room diagonals — derives from the same ratio. The tool does not require re-calibration for each measurement. One good reference unlocks the entire image.

Practical example: You have a floor plan and you know the living room wall on the left is 4.5 metres. You click both ends of that wall at calibration and measure 310 pixels between them. The scale becomes 4.5 ÷ 310 ≈ 0.0145 m/px. If you then measure a corridor and get 220 pixels, the real length is 220 × 0.0145 ≈ 3.19 m — without knowing anything else about the plan.

The same principle applies to photographs. If you know one object in a room photo (say a standard door is 2.1 m tall), you can calibrate against it and then measure the width of a window, the length of a sofa, or the distance between two walls — all from a single photo taken from any angle, as long as all measured objects lie in roughly the same plane.

For circle calibration (diameter mode), the formula is identical — MetricCanvas just calculates the distance between the two diametrically opposite points you clicked, then applies the same ratio. This is useful for columns, pipes, round tables, or any circular reference with a known diameter.

Real-world example: knowing everything from one wall

Suppose you have received a floor plan as a JPEG but the plan has no printed scale, and you only know one thing: the master bedroom is 3.6 m wide. Here is how to derive every other measurement in the building:

From this point, MetricCanvas can tell you: the total apartment width, the kitchen length, the corridor width, the distance from a window to a wall, the diagonal of any room. Every measurement derives from the single 3.6 m reference. You can export the full annotated image or the data table to share with an architect, contractor, or anyone else who needs the figures.

This works because floor plans are orthographic projections — all distances are drawn to scale in a flat 2D view. The same principle applies to any correctly projected drawing: site plans, elevation drawings, electrical schematics, and so on.

Tips for accurate results

• Use the highest resolution version of your image. More pixels between two points means less rounding error in the measurement.
• Zoom in as much as possible when placing calibration and measurement points — a misclick by 2 pixels matters much more at low zoom than at high zoom.
• Choose a calibration reference that is parallel to the direction you will be measuring most. A horizontal reference is ideal for horizontal measurements.
• For floor plans with a printed scale bar, calibrate against that bar rather than a wall, since printed scale bars account for drawing distortion and scan skew.
• If your image is a photograph taken at an angle (rather than a true orthographic view), measurements will only be accurate within the plane of the photographed surface. Distortion from perspective cannot be corrected without additional reference points.