Actual Size Online Ruler

This actual size online ruler is powered by HTML5 and JavaScript. It uses the canvas element.
The “image” you see below is technically not an image. It is dynamic and adjusts/calibrates itself based on the options you select below.

Sorry you cannot view the ruler because your browser does not support the canvas element. Please update your browser.

Why You Should Enter Your Screen Dimensions (Diagonal Screen Size)

In order to display a ruler in its actual size, two details should be known:

1. Screen resolution and
2. Monitor (or display) size

Your browser determines and exposes your screen resolution, but there is no way to be very sure about your monitor size (or the screen size of your phone or tablet) if you don’t explicitly select it. The device size supplied by your browser may not correspond to the real size of your device in many practical cases. It is merely proposed as an approximate value for consideration. The reason for this has to do with browser and operating system constraints. Technically speaking, there is really no way for the operating system running on a device to tell what the physical screen dimensions of the device are and so, there is no way for any program (like a browser) running on that operating system to tell the exact screen dimensions either. And if the browser doesn’t know the physical screen dimensions, it is not possible for something running inside the browser (in this case JavaScript) to know the physical screen dimensions either.

However, as earlier mentioned, your operating system does give us an “educated guess” about the physical screen size. This value is what is used to display this ruler the first time you visit this page. Depending on the class and type of your device, the error in the original screen size value reported by your operating system may vary from a few millimeters to several centimeters (or even up to a full inch). This is why I strongly recommend that you manually calibrate this ruler using the options provided above.

If you don’t know the value of the diagonal screen size of your device, in most cases you can quickly Google the information by searching with your device’s model name. Alternatively, if you have the original technical documentation of your device handy, you could refer to it. Technical documentations usually include device screen size (diagonal size) information.

Now, when you have selected your display size, this page recalibrates the above ruler and the result is an accurate ruler in its actual size.

If, however, you’re not after high accuracy, you can go ahead and work with the default ruler that this page displays on your screen. Just be aware that measurements you make using the default ruler should only be considered as quick and dirty approximations.

More Information About The Actual Size Online Ruler

Use this on-screen/online ruler to measure the size of an object in centimeters or inches when you have no real ruler at hand, or when a real ruler isn’t good enough for some reason (the real ruler might be too short or might not have the exact markings you need).

This actual size online ruler works on any device that allows you to browse the web – so you can use it on large screens (PC monitors, laptops, or smart TVs) and mobile devices (smartphones, tablets, phablets, and maybe even e-ink readers).

One really cool and unique feature of this virtual on-screen ruler is that it has no maximum length! It extends to fill out any screen width. So, even if you have an exceptionally wide screen (like a huge smart TV), this ruler extends to fill out the screen and continues to work accurately.

Requirements/Prerequisites To Use The Actual Size Online Ruler

Besides the clearly explained calibration requirement discussed above, in order to use this actual size on-screen ruler, the following prerequisites and requirements must be met:

1. JavaScript must be enabled in your browser.
2. Your browser must support the HTML5 canvas element. Most modern browsers now support the canvas element. If you can see any ruler “image” above, it means your browser supports this and you’re good.
3. Your browser should be at its standard/default page scale adjustment. As pointed out by a commenter below, if you zoom in or zoom out your browser (by pressing Ctrl+ or Ctrl-), the ruler scale will stretch or shrink along with other elements on the page that are subject to transformation when scaling. This is completely normal browser behavior and while I could technically disable zooming on the page using code, I decided to not do this because, in order to meet accessibility and usability standards, users SHOULD be allowed to zoom. So if you want to get accurate results, just don’t use Ctrl+ or Ctrl- (leave your browser at its default zoom level of 100%).

Feedback And Support

If you need any help using this ruler, just send me a quick note via the comments sections. I’m almost always online.

I also encourage and welcome feature suggestions and bug reports (if any).

For more information about length units, see the official w3.org spec sheet.