Camera Grid Overlay
Point your rear camera at a wall or floor to preview a tile or rebar/stud layout pattern before cutting or marking anything. This is a visual mockup guide only — a browser camera feed carries no real-world distance information, so the overlay is not to scale. For precise measurements, use the Screen Ruler instead.
This browser doesn't support camera access (`navigator.mediaDevices.getUserMedia`) — try a modern mobile browser over HTTPS.
How to use the Camera Grid Overlay
Allow camera access
Tap Start Camera and accept the browser prompt. The feed is rendered locally and never transmitted.
Pick a pattern
Grid for rebar and stud spacing, stack or stretcher bond for tile and brick, herringbone for an approximate diagonal lay.
Set the density
Adjust the slider until the overlay roughly matches the module you plan to use.
Frame the surface square-on
Stand square to the wall or floor. Shooting from an angle distorts the apparent spacing.
Judge the layout, then measure properly
Use it to decide the bond direction and starting point, then take the real dimensions from a tape or the photo takeoff tool.
Where this tool stops
A browser camera feed carries no depth or scale information, so this is a visual mock-up, not a measurement. Use the screen ruler or photo takeoff when you need a real dimension.
Camera Grid Overlay — frequently asked questions
- Is this augmented reality with real measurements?
- No, and it deliberately does not pretend to be. A browser camera stream gives pixels with no depth channel and no scale, so the overlay cannot know how far away the wall is. It is a layout preview — genuinely useful for choosing a bond pattern and a starting point, useless as a measuring device.
- Why does the pattern not stick to the wall as I move?
- Anchoring an overlay to a surface needs plane detection and camera pose tracking, which browsers do not expose. The pattern is drawn on the viewport, so it moves with the phone. Hold still and frame the surface square-on.
- What is the difference between stack bond and stretcher bond?
- Stack bond aligns every joint vertically into a strict grid — a contemporary look that shows any inaccuracy in setting-out. Stretcher bond offsets each course by half a unit, the traditional running bond, which hides small variations and is more forgiving to lay.
- Why is herringbone marked as approximate?
- A true herringbone is a 45° interlock whose apparent geometry depends on the viewing angle. The overlay draws the pattern's rhythm rather than a perspective-correct projection, so it is a guide to the look, not a cut template.
- Does the camera feed get uploaded?
- No. There is no server in this architecture to upload to. The stream is attached to a video element in the page and the overlay is drawn on top locally; when you close the page the stream is stopped and released.
- Why does it say the camera is unavailable?
- Browsers only allow camera access over HTTPS, and only after you accept the permission prompt. If you dismissed the prompt earlier, the browser remembers that for the site and you will need to clear the permission in the site settings.
- Can I use it to check rebar spacing on a pour?
- As a visual sanity check on the pattern, yes. For verifying actual spacing against a drawing, measure it — the overlay has no scale, and rebar spacing is exactly the kind of thing an inspector checks with a tape.
- Does it work with the front camera?
- It requests the rear camera, which is the one you point at the work. On a device with no rear camera the browser falls back to whatever is available, but the tool is designed around a rear-facing view.
Turn this measurement into a quantity
A reading on its own does not order material. These calculators take what you just measured and give you quantities, cuts or cost.