两者都是屏幕与窗口的水平距离，还是我完全错了？
我不完全确定你对$canvas的意思，但正如这里所说(MDN(关于Element.getBoundingClientRect():
Element.getBoundingClientRect((方法返回一个DOMRect对象提供有关元素大小及其位置的信息相对于视口。
关于这里的viewport(MDN(：
视口表示中的多边形(通常为矩形(区域当前正在查看的计算机图形。在web浏览器中术语，它指的是您正在查看的文档中当前在其窗口(或屏幕，如果文档为以全屏模式观看(。视口外的内容不是在屏幕上可见，直到滚动到视图中。
这里(MDN(关于Window.screenX()
Window.screenX只读属性返回水平距离，以CSS像素为单位，将用户浏览器视口左边框的屏幕左侧。
所以你的问题的答案是否定的。它们不同。第一个是相对于浏览器窗口的，而第二个是相对于屏幕的。如果浏览器在全屏模式下运行，它们可能会匹配相同的值。