Dynamically change mouse cursor size

Question

I'm currently working on a project where the mouse cursor for a web application is a circle with radius r where r can be changed by the user. The cursor need only appear within a specific element on the page, but that element should still be able to receive clicks from the user.

From what I can imagine, my only options are to use javascript to change the cursor image; however, that would require an image for each possible choice of r the user has.

Or I can have a canvas element follow the cursor which would draw a circle with radius r in it, however, I am not sure whether the original element would still receive clicks this way.

Any thoughts? Is there a better trick that I'm missing?

Carb0n1c · Accepted Answer · 2011-09-22T08:44:01.957

You can do that fairly easily with canvas.

Placing the element that is going to receive clicks over the canvas.

Tracking the mouse position on the top layer (the element to receive clicks) and using those mouse positions to draw on the canvas below.

Here is some code I made for you:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
#hold { margin:0 auto; width:500px; height:500px; border:1px solid #000; }
#canvas { float:left; }
#top-layer { position:absolute; z-index:1; width:500px; height:500px; cursor:crosshair; }
</style>
</head>
<body>

<div id="hold">

  <canvas id="canvas" width="500" height="500"></canvas>

  <div id="top-layer" onmousemove="trackMouse(event);">
    <ul>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
    </ul>
  </div>

</div>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function trackMouse(event) {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, 500, 500);

  this.r = 25; // Radius of circle
  this.x;
  this.y;

  this.x = event.clientX - document.getElementById('canvas').offsetLeft;
  this.y = event.clientY - document.getElementById('canvas').offsetTop;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
};

</script>
</body>
</html>

score 0 · Answer 2 · answered Sep 08 '11 at 22:50

Go ahead and use a canvas. As you stated already, it's going to be a hassle to do it with different mouse cursor pictures.

Whenever a javascript event occurs, it happens in all of elements. That is, if you have a link inside of a div and it is clicked, both the link and div receive the click event. (But I'm not sure how the ordering goes off the top of my head)

Dynamically change mouse cursor size

2 Answers2

Linked