Screen Geometry Test

How to check for a stretched picture and overscan

1. Press Start test to fill the screen. Change patterns with the arrow keys, Space, Enter, a tap or the Previous and Next buttons, and press Esc or Exit to leave.
2. On Grid, check that the lines are straight, evenly spaced and sharp all the way to the edges.
3. On Circles and Squares, check that every circle looks round and every square is as wide as it is tall. Ovals and rectangles mean the picture is stretched or squashed.
4. On Crosshair, check that the cross sits in the center and the diagonals end exactly in the corners.
5. On Overscan, check that the outer border and all four corner markers are visible. If they are cut off, the 2.5% and 5% guides show roughly how much of the picture is lost.
6. On Rulers, read distances in CSS pixels from the top-left corner. The bar in the middle is 96 CSS px long: the browser's nominal inch, not a measured one.
7. Press Invert to switch to black lines on white.

What is overscan?

Overscan is a TV or projector enlarging the picture slightly so its edges fall outside the screen, a habit carried over from analog TV. With a computer, it cuts off the taskbar, menus and the edges of games. To stop it, choose the TV's picture size or aspect option that fits the signal to the screen without zooming (the name varies by brand), or the graphics driver's scaling or underscan setting if the TV has none.

Why does my screen look stretched?

The picture has a different shape from the screen, and something stretches it to fill. The usual causes:

• The desktop resolution is not the panel's native one and has a different shape. Choose the native resolution (Windows marks it Recommended); the Screen Resolution Test shows the resolution and aspect ratio your system is using.
• The monitor or graphics driver stretches every signal to fill the screen. Set the monitor's aspect option, or the driver's scaling mode, to keep the aspect ratio, so a picture of another shape gets black bars instead.
• A TV's zoom or wide picture mode is on. Choose the mode that shows the signal at its own shape.
• The screen is duplicated to a display of another shape, such as a projector. Both then use one resolution, so one of them can look stretched. Extend the displays instead, or choose the resolution for the one that matters.

How to use it as a projector test pattern

Show the Grid and aim the projector until the lines are straight and parallel and the squares are the same size across the picture. Converging lines point to keystone; bent lines to the lens or an uneven screen. Where you can, move the projector or use lens shift rather than keystone correction, because digital keystone resamples the picture and softens fine lines. Then use Overscan to fit the edges of the picture to the screen, and focus until the small numbers of the Rulers pattern are sharp from one end of each ruler to the other.

What this test can detect

• A stretched or squashed picture: ovals instead of circles, rectangles instead of squares.
• Overscan: an outer border or corner markers cut off, with guides showing roughly how much is cropped.
• An off-center picture, or diagonals that miss the corners.
• Soft or unevenly spaced lines from a non-native resolution or scaling.
• Projector keystone and lens distortion, seen as converging or bent grid lines.

How it works

The patterns are drawn on a canvas sized to the device pixels it covers, so horizontal and vertical lines land on whole device pixels at pixel ratios from 1 to 3. Any softness then comes from scaling after the browser: in the operating system, the graphics driver or the display.

Grid, Circles, Squares and Crosshair are laid out from the exact center: grid lines every 50 CSS px, thicker every 250 px, circles every 50 px of radius and 100 px squares. The overscan guides sit 2.5% and 5% in from each edge, and the ruler ticks count every 10 px from the top-left corner. Each pattern is redrawn when the canvas size or the pixel ratio changes.