Ambos son la distancia horizontal de la pantalla desde la ventana, ¿o estoy completamente equivocado aquí?
No estoy perfectamente seguro de lo que quiso decir con $canvas , pero como se indica aquí (MDN) sobre Element.getBoundingClientRect() :
El método Element.getBoundingClientRect() devuelve un objeto DOMRect que proporciona información sobre el tamaño de un elemento y su posición relativa a la ventana gráfica.
Y sobre la viewport aquí (MDN):
Una ventana gráfica representa un área poligonal (normalmente rectangular) en gráficos de computadora que se está viendo actualmente. En términos de navegador web, se refiere a la parte del documento que está viendo y que actualmente está visible en su ventana (o en la pantalla, si el documento se está viendo en modo de pantalla completa). El contenido fuera de la ventana gráfica no es visible en la pantalla hasta que se desplaza a la vista.
Yaquí (MDN) sobre Window.screenX()
La propiedad de solo lectura Window.screenX devuelve la distancia horizontal, en píxeles CSS, del borde izquierdo de la ventana gráfica del navegador del usuario al lado izquierdo de la pantalla.
Entonces la respuesta a tu pregunta es no. Ellos son diferentes. El primero es relativo a la ventana del navegador, mientras que el segundo es relativo a la pantalla. En caso de que el navegador se ejecute en modo de pantalla completa, es posible que coincidan con el mismo valor.