Realmente no entiendo por qué el elemento p siempre está oculto (y, por lo tanto, por qué el mouseout siempre se dispara):
const canvas = document.querySelector("canvas"); const infoBox = document.querySelector("#info-box") canvas.addEventListener("mousemove", evt => { evt.preventDefault() infoBox.style.display="block" infoBox.style.position="absolute" infoBox.style.top= evt.clientY+"px" infoBox.style.left=evt.clientX+"px" console.log("moved") }) canvas.addEventListener("mouseout", evt => { evt.preventDefault() infoBox.style.display="none" console.log("exit") }, false) canvas{ border-width: 0px; border-color:#212121; background-color: blue; } <canvas></canvas> <div id="info-box" style="display: none;"><p>Hello</p></div>La salida ocurre cada vez que aparece el cuadro de información. Agregar un desplazamiento al div #info-box significa que el mouse no cree que haya abandonado el lienzo.
const canvas = document.querySelector("canvas"); const infoBox = document.querySelector("#info-box"); const mouseOffset = 2; canvas.addEventListener("mousemove", evt => { evt.preventDefault() infoBox.style.display = "block" infoBox.style.position = "absolute" infoBox.style.top = evt.clientY + mouseOffset + "px" // add an offset here infoBox.style.left = evt.clientX + mouseOffset + "px" // and here console.log("moved") }) canvas.addEventListener("mouseout", evt => { evt.preventDefault() infoBox.style.display = "none" console.log("exit") }, false) canvas { border-width: 0px; border-color: #212121; background-color: blue; } <canvas></canvas> <div id="info-box" style="display: none;"> <p>Hello</p> </div>