My attempt at a cursor circle

cursor.js

const canvas = document.getElementById('myCanvas');

// make the canvas the size of the window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
let radius = 35;


function findTopLeft(element) {
    var rec = element.getBoundingClientRect();
    return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

function getElementBBox(element) {
    var rec = element.getBoundingClientRect();
    return {width: rec.width, height: rec.height};
}

function checkIfTouching(element, x, y) {
    // check if the cursor is in the elementm (from top left to bottom right)
    const elementBBox = getElementBBox(element);
    const elementTopLeft = findTopLeft(element);
    const elementBottomRight = {top: elementTopLeft.top + elementBBox.height, left: elementTopLeft.left + elementBBox.width};

    // check if it is near the cursor
    const cursorDistances = {
        top: Math.abs(elementTopLeft.top - y),
        left: Math.abs(elementTopLeft.left - x),
        bottom: Math.abs(elementBottomRight.top - y),
        right: Math.abs(elementBottomRight.left - x)
    };

    // if the cursor is within 100px of the element, return true
    if (cursorDistances.top < 100 && cursorDistances.left < 100 && cursorDistances.bottom < 100 && cursorDistances.right < 100) {
        if (x >= elementTopLeft.left && x <= elementBottomRight.left && y >= elementTopLeft.top && y <= elementBottomRight.top) {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }
    // check if the cursor is in the elementm (from top left to bottom right)


}

function sleep(ms) {
    // wait for ms milliseconds
    return new Promise(resolve => setTimeout(resolve, ms));
    return;
}

async function easeRadiusDown(target) {
    while (radius > target) {


        radius -= 1;

        await sleep(10);

        updateCanvas();

    }
}

async function easeRadiusUp(target) {
    while (radius < target) {
        radius += 1;

        await sleep(10);

        updateCanvas();

    }


}

const Mouse = {
    x: 0,
    y: 0,
}

document.addEventListener('mousemove', (event) => {

    Mouse.x = event.clientX;
    Mouse.y = event.clientY;
});


let touchCheck = ['button', 'a', 'image'];

function updateCanvas() {



    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);


    context.lineWidth = 2;
    context.beginPath();
    context.fillStyle = '#0077aa';
    context.strokeStyle = '#0077aa47';

    // check if the cursor is touching a button


    // for each element on the page in this list, check if the cursor is touching it


    // get all elements on the page
    let elements = document.getElementsByTagName('*');
    // filter out the ones that are not in the touchCheck list
    let filteredElements = Array.prototype.filter.call(elements, function(element) {
        return touchCheck.includes(element.tagName.toLowerCase());
    });


    // check if the cursor is touching any of the filtered elements

    for (let i = 0; i < filteredElements.length; i++) {

        if (checkIfTouching(filteredElements[i], Mouse.x, Mouse.y)) {
            // animate the raduis down to 35
            
            easeRadiusUp(50);
            context.strokeStyle = '#0077aa';

    
        } else {
            // animate the radius up to 50
            easeRadiusDown(35);
        }

        console.log(checkIfTouching(filteredElements[i], Mouse.x, Mouse.y))
    }

    






    context.arc(Mouse.x, Mouse.y, radius, 0, 2 * Math.PI, false);

    // log all of the data of context
    console.log(radius);

    context.stroke();
}

// run the updateCanvas function every 10 milliseconds
setInterval(updateCanvas, 0);