CODEWITHSUNDEEP
javascriptcsshtml
Chris
Chris

Reputation: 221

Hide Mouse Cursor when it's within HTML5 Canvas Javascript

I'm in the process of making a game using Javascript and the html5 canvas element as an alternative to Flash. My question is: is there any bit of code I can use to hide the mouse cursor/pointer as it passes within the canvas? Help is much appreciated!

Upvotes: 22

Views: 26277

Answers (4)

Amine Belkhiria
Amine Belkhiria

Reputation: 67

Select the canvas element:

 canvas = document.getElementById("canvas");

Get context : 

context = canvas.getContext("2d");

Set none :

context.strokeStyle = none;

Upvotes: -1

sdgfsdh
sdgfsdh

Reputation: 37025

The simplest way (on modern browsers) is to set the cursor to none on the canvas.

If your canvas is created in HTML, do: 

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

I would favour this over a style-sheet because you want to guarantee the cursor value is not over-ridden.

If your canvas is created in JavaScript, do: 

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

Upvotes: 4

VIK
VIK

Reputation: 689

You can use javascript to manipulate cursor style. Code:

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

Upvotes: 9

ankit
ankit

Reputation: 3358

I don't think you need Javascript for this, you can just use CSS. Assign your canvas a div id/class, and then use this in your CSS template:

* {cursor: none;}

Upvotes: 21

Related Questions