Ocultar el cursor del ratón cuando está dentro de HTML5 Canvas Javascript

Question

estoy en el proceso de hacer un juego usando Javascript y el elemento canvas de HTML5 como una alternativa a Flash. Mi pregunta es: ¿hay algún código que pueda usar para ocultar el cursor/puntero del mouse mientras pasa dentro del lienzo? ¡La ayuda es muy apreciada!

Answer 1

No creo que necesita Javascript para esto, sólo puede utilizar CSS. Asignar el lienzo un div id/clase, y luego utilizar esto en su plantilla CSS:

* {cursor: none;}

Answer 2

Puede usar javascript para manipular estilo del cursor. Código:

<div id="canvas_div_no_cursor"> 
    <!-- canvas here --> 
</div> 
<script type="text/javascript"> 
    document.getElementById('canvas_div_no_cursor').style.cursor = "none"; 
</script> 

Answer 3

La manera más simple (en los navegadores modernos) es establecer el cursor a none en el lienzo.

Si se crea el lienzo en HTML, hacer:

<canvas id="canvas" style="cursor: none;"></canvas> 

yo estaría a favor de este sobre una hoja de estilo porque quiere garantizar el valor cursor no está sobre-montado.

Si se crea el lienzo en JavaScript, hacer:

const canvas = document.createElement('canvas'); 
canvas.style.cursor = 'none'; 
document.body.appendChild(canvas);