Handbook
The complete online protractor guide
Everything the tool can do, in one place: screen measurement, photo mode, multi-ray, live math, calibration, the edge stage, exports, shortcuts and fixes for common problems. New here? The quick how-to covers the basics in four steps.
Updated Online Protractor
1. Measure in 30 seconds
- Place the vertex. Drag the glowing center ring to the exact point where the two edges meet. Zoom the page and use the crosshair for sub-pixel placement.
- Align the baseline. Drag handle A onto the first edge at 0°. Press L to lock it if the reference must not move.
- Drag the second ray. Drag handle B onto the second edge. The header shows the interior angle live, plus reflex and radians.
- Refine and reuse. Nudge with arrow keys (1°, or 5° with Shift), type exact values into the numeric box, or press a preset such as 90°. Copy the result to your clipboard.
Golden rule: drag handles far along each edge, away from the vertex. Short rays magnify placement error; long rays average it out.
2. Anatomy of the window
Result header
Live readout with direct numeric entry, angle-type pill (Acute, Right, Obtuse…), reflex complement, radians, and a status pill (Ready, Snapped, Image Mode, Exact 90°). Below it sits the math strip: complement (90−θ), supplement (180−θ), slope as ratio and grade percent, and sin·cos·tan — all updating every frame. Copy, Share, Reset and Fullscreen sit on the right.
Control bar
180°/360° mode, degrees/radians, snap increments (Off–90°), baseline lock, reflex toggle, bisector overlay, Add Ray for multi-ray mode, the gradient Image upload button, sample image, camera capture, undo/redo, and a More panel with grid, ruler, crosshair, contrast, precision, size, rotation, color, opacity, photo zoom/rotate/flip/brightness, canvas zoom and export buttons.
Canvas, presets, footer
The SVG stage supports mouse, touch and keyboard, with a magnifier while dragging and an onboarding hint that fades on first use. Preset chips (30°–270°) jump the ray instantly. The footer holds the full shortcut list and a live region that announces every result to screen readers.
3. Modes, units & precision
- 180° vs 360°. 180° is the classic semicircle for everyday angles. 360° shows the full circle and the oriented angle — use it for reflex work beyond 180°, or toggle Measure reflex to make the large side primary in either mode.
- Degrees vs radians. Toggle anytime; Copy and Share follow the active unit. 180° = π rad, 90° = π/2.
- Precision 0–2 decimals changes display only. Showing 45.12° does not claim ±0.01° real accuracy — see accuracy & limitations.
- Snap. Learn with 5° or 15°, measure with Off or 1°. Press S to cycle. Baseline lock (L) freezes handle A while you sweep B.
4. Multi-ray & bisector
Real drawings have more than two edges. Press Add Ray + to drop up to 6 extra rays from the same vertex — each draggable with mouse, touch or arrow keys, with automatic labels showing every between-ray angle and a chip bar for deleting rays. The Bisector toggle (B) draws the exact half-angle ray in pink with a ½ marker: perfect for miters, folds and symmetric layouts. Need a separate corner too? Add angle creates fully independent measurements, each with its own color, listed as switchable chips.
5. Photo mode, start to finish
- Load. Gradient Image button, drag & drop onto the canvas, Ctrl+V paste, Try Sample, or Camera capture on supported devices. PNG, JPG/JPEG and WebP up to 12 MB.
- Straighten. Drag the photo to pan; zoom 50–200%; rotate via slider or ±90° buttons; mirror with Flip H/V; lift faint lines with brightness/contrast; fade with opacity. Fit restores everything at once.
- Measure. The protractor moves independently of the photo — park the vertex, align the rays, enable high-contrast overlay on pale images.
- Know the limits. You are measuring the 2D projection, not the 3D object: tilted shots skew angles and wide lenses bend lines near edges. Shoot straight-on, centered, at the highest resolution you have.
Privacy: photos are decoded locally via blob URLs and never uploaded. Removing or replacing an image revokes its URL immediately; nothing is stored.
6. Calibration & edge stage
Browsers assume 96 pixels per inch; real displays vary. Calibrate once and the Edge Protractor renders at true physical size:
- Method 1 · Auto-Detect — one-click estimate from resolution and pixel ratio. Fast, low confidence; verify for exact work.
- Method 2 · Screen Diagonal — enter your advertised diagonal (presets 13.3″–27″); PPI = √(w²+h²) / diagonal.
- Method 3 · Credit Card — hold a real card (85.60 × 53.98 mm) against the on-screen outline and drag until the widths match. Most accurate.
Then dock the protractor to the top, bottom, left or right edge — it slides along the edge like a physical instrument with a vertex-tracking origin marker — or float it free. Uploading a photo auto-detects its two strongest edges on-device (Sobel + Hough line detection), places the vertex at their intersection and aligns baseline and ray. The movable baseline, relative-angle presets, true-size inch/cm ruler, grid, fullscreen and fullscreen viewing complete the stage. Keep browser zoom at 100% while calibrated.
7. Export, import & reuse
- PNG — renders the current stage to a shareable image.
- JSON — full workspace backup; re-import it later to restore every measurement.
- CSV — spreadsheet-ready rows (ID, label, degrees, radians, center).
- Copy & Share — Copy takes the active unit to your clipboard; Share uses the system share sheet where available.
- Undo/redo — 60 steps of history (Z / Shift+Z), plus Duplicate for variant measurements.
8. Troubleshooting
Reading jumps while dragging
Snap is on. Set Snap to Off or 1°, or press S to cycle. Short rays near the vertex also amplify jitter — lengthen both rays.
Handles won't move
Baseline lock (L) freezes handle A; the lock button in the bar freezes the whole measurement. Unlock and try again.
Photo looks wrong / won't load
Only PNG, JPG/JPEG and WebP under 12 MB. “Corrupted image” means the file couldn't decode — re-export it. Paste blocked? Use drag & drop or the picker instead.
Angle disagrees with the real object
Perspective and lens distortion change apparent angles — re-shoot straight-on and centered. For physical measuring, calibrate and use the edge stage instead.
Auto-detect missed
It needs two clear straight edges. Boost contrast, crop tightly to the corner, or drag the vertex and rays manually — detection never blocks manual work.
Quick answers
How do I measure an angle on my screen?
Drag the center to the vertex, align handle A with one edge at 0°, drag handle B to the other edge, and read the live value. Arrow keys nudge 1° (Shift for 5°).
Can the protractor detect angles in a photo automatically?
The Edge Protractor stage auto-detects the two strongest straight edges on upload using on-device line detection, places the vertex at their intersection and aligns the rays. It needs two clear straight edges; otherwise drag manually.
What does the math strip show?
Live complement (90 minus angle), supplement (180 minus angle), slope as a ratio and grade percent, plus sin, cos and tan of the interior angle.
How do I get true physical size on screen?
Calibrate once: auto-detect for a rough estimate, screen diagonal for a good value, or credit-card matching for exact size. The edge protractor then renders at real-world inches or centimeters.
Is my photo uploaded anywhere?
No. Photos are read locally via FileReader and blob URLs, never leave your device, and the URL is revoked when you remove or replace the image.
Can I measure more than one angle at once?
Yes. Add extra rays (up to 6) from the same vertex with live between-ray labels, or add whole new angle measurements, each with its own color, and switch between them from the chips bar.