Trying to draw arrows

Won't work 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

// https://stackoverflow.com/a/6333775
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 pElem = document.getElementById('positionReadout')

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() {
    const leftUpdate = initialLeft - (window[sX] + canvasElem.offsetLeft)
    const topUpdate = initialTop - (window[sY] + canvasElem.offsetTop)

    if (leftUpdate !== previousLeft || topUpdate !== previousTop) {
        ctx.fillStyle = 'rgb(255, 255, 255)'
        ctx.fillRect(0, 0, width, height)
        ctx.beginPath()
        canvas_arrow(ctx, previousLeft, previousTop, leftUpdate, topUpdate)
        ctx.stroke()

        previousLeft = leftUpdate
        previousTop = topUpdate

        pElem.textContent = `Window.screenLeft: ${window[sX]}, Window.screenTop: ${window[sY]}`
    }
    requestAnimationFrame(positionElem)
}

requestAnimationFrame(positionElem)

/*ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
canvas_arrow(ctx, 10, 30, 200, 150);
canvas_arrow(ctx, 100, 200, 400, 50);
canvas_arrow(ctx, 200, 30, 10, 150);
canvas_arrow(ctx, 400, 200, 100, 50);
ctx.stroke();*/


function canvas_arrow(context, fromx, fromy, tox, toy, headlen = 10) {
  //var dx = tox - fromx;
  //var dy = toy - fromy;
  const angle = Math.atan2(toy - fromy, tox - fromx)
  context.moveTo(fromx, fromy)
  context.lineTo(tox, toy)
  context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6))
  context.moveTo(tox, toy)
  context.lineTo(tox - headlen * Math.cos(angle + Math.PI...