How to get size of an element in physical pixels?

Question

Let's say i have a div that i've defined to be (32px, 32px) in size:

html:

<div id="theBox"></div>

css:

div {
    width: 32px;
    height: 32px;
    background-color: gray;
}

(Live jsFiddle view)

How can i get the actual size of the box in pixels?

You'll note that the box doesn't have to be 32px. It can be larger:

or smaller:

or exactly 32 pixels:

The reason for the differences, of course, is because Chrome and Internet Explorer allow me to zoom.

i would like to know the actual size of the element. Why? No reason; just cause. i'm curious, and i'd like to broaden the limits of human knowledge and understanding.

Or because i need to set the internal resolution of a Canvas element to match the actual size of the canvas element - otherwise the rendered canvas contents will get stretched without my permission:

Although, my reasons for wanting to know the size of an element do not necessarily apply just to a Canvas. i'm asking about a generic div element; and the answer will be used towards canvas, img, video, and anything else i desire.

Answer 1

You would need to detect the zoom level.

Then write a simple arithmetic proportion to calculate the 'actual' size, or the size as it appears to the user.

var zoomLevel,
, actualSize = 32
, viewSize;
function getZoomLevel(){ ... your code here...return zoomLevel;}

function getViewSize(actualSize){
  viewSize = actualSize*getZoomLevel();
  return viewSize;
}

Then ... call getViewSize() when ready ...

Hopefully the math is clear enuff. Solving for y (or viewSize):

actualSize/1 = y/zoomLevel

However, you will need to be careful about sub-pixel precision, especially among the notoriously bad length/width determining browsers like IE9. But, as long as all you need is something close, this should work.