Draw a line to follow mouse from a permeant fixed point

I would like to make 1px wide line where its point A will be in a given div, and point B will be the mouse, so when I move the mouse, the line is following along. Is this possible.
The fixed point will never change, but the variable of the mouse is what changes.

Something like the following should work, especially if you paste it into the console in this thread:

function followLine(tE) {
    let c = document.createElement('canvas')
    c.style.pointerEvents = 'none'
    c.style.position = 'absolute'
    c.style.top = 0
    c.style.left = 0
    c.width = document.documentElement.clientWidth
    c.height = document.documentElement.clientHeight

    let ctx = c.getContext('2d')
    document.body.appendChild(c)

    document.addEventListener('mousemove', e => {
         ctx.clearRect(0, 0, c.width, c.height)
         ctx.beginPath()
         let r = tE.getBoundingClientRect()
         ctx.moveTo(r.left + window.scrollX, r.top + window.scrollY)
         ctx.lineTo(e.pageX, e.pageY)
         ctx.stroke()
         ctx.closePath()
    })
}
 
[...document.querySelectorAll('.main-avatar')].map(e => followLine(e))
1 Like

Yes Krilnon, this is brilliant…and ALMOST perfect.

The line coming from the fixed point to the mouse, is spot on. What I now need is for the line to continue through the mouse, and out the other side; as opposed to land on another fixed point.

Does that make sense? So the outer line edge, is a constantly variable position, depending on the location of the mouse on the screen.

Can share a screen shot if needed?

Looking forward to your reply!

1 Like