I have a small amount of experience with setInterval() so I'm not quite sure how to use it . In the past , I've even tried setTimeout() in this code ,but then realized that setInterval() is better. I'm trying to write it with as little code as I can. Anyways, I only need this part of the code helped out with, and then I'll be able to put in the big one that I' working on . To summarize the ultimate purpose, this code is supposed to show where the hidden treasure is on the map, that circle is gonna pop up where the treasure is located and the user has to click around the field and try to find it. The main code is finished but I just cant figure out how to make this hint. While setInterval() is below 3000(3 seconds) the circle shows, when the circle disappears , the timer keeps going so that the user couldn't use the hint more than once.

let elem = document.getElementById("hint");

elem.addEventListener('click', myFunction(){
setInterval(myFunction, 3050);


    function myFunction(time){
        while (time<3000){
        let c = document.getElementById("myCanvas");
        let ctx = c.sdgetContext("2d");
        ctx.beginPath();
        ctx.arc(110,80, 70,0, 2 * Math.PI);
        ctx.fillStyle ="red";
        ctx.globalAlpha = "0.6";
        ctx.fill();
         }
    }
});