Ball stays where it was on screen

https://mdn.github.io/dom-examples/screenleft-screentop/ https://github.com/mdn/dom-examples/blob/master/screenleft-screentop/index.html

by MegaScience

HTML

<p id="positionReadout"></p>
<canvas id="mainCanvas"><p>Your browser doesn't support canvas. Boo hoo!</p></canvas>

CSS

canvas {
  display: block;
  margin: 50px auto;
}

JavaScript

const canvasElem = document.getElementById('mainCanvas')
const width = canvasElem.width = 640
const height = canvasElem.height = 480
const hwidth = width / 2
const hheight = height / 2
const ctx = canvasElem.getContext('2d')

const degToRad = degrees => degrees * Math.PI / 180
const dTR0 = degToRad(0)
const dTR360 = degToRad(360)

const pElem = document.getElementById('positionReadout')

//let initialTop, initialLeft

//if (!window.screenLeft) {
//  window.screenLeft = window.screenX
//  window.screenTop = window.screenY
//}

//initialLeft = window.screenLeft + canvasElem.offsetLeft
//initialTop = window.screenTop + canvasElem.offsetTop

const sX = window?.screenX !== undefined ? 'screenX' : 'screenLeft'
const sY = window?.screenY !== undefined ? 'screenY' : 'screenTop'

const initialLeft = window[sX] + canvasElem.offsetLeft
const initialTop = window[sY] + canvasElem.offsetTop

let previousLeft = initialLeft
let previousTop = initialTop

function positionElem() {
    //let newLeft = window.screenLeft + canvasElem.offsetLeft
    //let newTop = window.screenTop + canvasElem.offsetTop

    //let leftUpdate = initialLeft - newLeft
    //let topUpdate = initialTop - newTop

    const leftUpdate = initialLeft - (window[sX] + canvasElem.offsetLeft)
    const topUpdate = initialTop - (window[sY] + canvasElem.offsetTop)

    if (leftUpdate !== previousLeft || topUpdate !== previousTop) {
        previousLeft = leftUpdate
        previousTop = topUpdate
        //ctx.fillStyle = 'rgb(0, 0, 0)'
        //ctx.fillRect(0, 0, width, height)
        ctx.fillStyle = 'rgb(0, 0, 255)'
        ctx.beginPath()
        ctx.arc(leftUpdate + hwidth, topUpdate + hheight + 35, 50, dTR0, dTR360, false)
        ctx.fill()

        //pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop
        pElem.textContent = `Window.screenLeft: ${window[sX]}, Window.screenTop: ${window[sY]}`
    }
   ...