SOURCE

class Arrow {
    constructor() {
        this.x = 0
        this.y = 0
        this.rotation = 0
        this.color = 'pink'
    }
    draw(context) {
        context.save()
        context.translate(this.x, this.y)
        context.rotate(this.rotation)
        context.lineWidth = 2
        context.fillStyle = this.color
        context.beginPath()
        context.moveTo(-50, -25)
        context.lineTo(0, -25)
        context.lineTo(0, -50)
        context.lineTo(50, 0)
        context.lineTo(0, 50)
        context.lineTo(0, 25)
        context.lineTo(-50, 25)
        context.lineTo(-50, -25)
        context.closePath()
        context.fill()
        context.stroke()
        context.restore()
    }
}

function captureMouse() {
    const mouse = { x: 0, y: 0 }
    window.addEventListener('mousemove', event => {
        mouse.x = event.clientX
        mouse.y = event.clientY
    })
    return mouse
}

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight

const mouse = captureMouse()

const arrow = new Arrow()
arrow.x = canvas.width / 2
arrow.y = canvas.height / 2


function drawFrame() {
    requestAnimationFrame(drawFrame)
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    const dx = mouse.x - arrow.x
    const dy = mouse.y - arrow.y
    const rotation = Math.atan2(dy, dx)

    arrow.rotation = rotation

    arrow.draw(ctx)
}

drawFrame()

<canvas id="canvas"></canvas>

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}