Both are the horizontal distance of the screen from the window, or am I completely wrong here?

CodePudding user response：

I'm not perfectly sure what you meant with $canvas but as stated here (MDN) about Element.getBoundingClientRect():

The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

And about the viewport here (MDN):

A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the document you're viewing which is currently visible in its window (or the screen, if the document is being viewed in full screen mode). Content outside the viewport is not visible onscreen until scrolled into view.

And here (MDN) about Window.screenX()

The Window.screenX read-only property returns the horizontal distance, in CSS pixels, of the left border of the user's browser viewport to the left side of the screen.

So the answer to your question is no. They are different. The first one is relative to the browser window while the second is relative to the screen. In case the browser is running in full screen mode, they might match the same value.