Home/ Questions/Q 6589075
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T17:07:35+00:00

I’m currently working on a project where the mouse cursor for a web application

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0