Adjust the size of the mouse cursor in real time

Question

Adjust the size of the mouse cursor in real time

I'm currently in the process of developing a project where I want to create a web application with a mouse cursor that appears as a circle with a customizable radius, which can be altered by the user. The main requirement is for this custom cursor to only be visible within a specific element on the webpage, while still allowing user interaction through clicks.

As far as my brainstorming goes, it seems like my potential options involve using JavaScript to change the cursor image, but this would mean needing an image for every possible value of r selected by the user.

Alternatively, I could consider implementing a canvas element that tracks the cursor and draws a circle with the specified radius within it. However, there is uncertainty regarding whether the original element will retain its ability to receive user clicks with this approach.

Do you have any ideas or suggestions? Is there a more efficient solution that I might not be considering?

javascript css html

Answer 1

Answer №1

Using canvas makes it easy to achieve this.

All you need to do is place the clickable element above the canvas.

Track the mouse position on the top layer (the clickable element) and utilize these coordinates to draw on the canvas underneath.

Check out this code snippet I prepared 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 (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects 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>

Answer 2

Using canvas makes it easy to achieve this.

All you need to do is place the clickable element above the canvas.

Track the mouse position on the top layer (the clickable element) and utilize these coordinates to draw on the canvas underneath.

Check out this code snippet I prepared 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 (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects to Google)</a></li>
      <li><a href="http://www.google.com">Test Link (redirects 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>

Answer 3

Answer №2

Feel free to utilize a canvas for this task. As previously mentioned, using various mouse cursor images can be quite cumbersome.

With every Javascript event that occurs, it impacts all elements on the page. This means that if there is a link within a div and it gets clicked, both the link and div will register the click event. (Although I cannot recall the exact order at the moment)

Answer 4

Feel free to utilize a canvas for this task. As previously mentioned, using various mouse cursor images can be quite cumbersome.

With every Javascript event that occurs, it impacts all elements on the page. This means that if there is a link within a div and it gets clicked, both the link and div will register the click event. (Although I cannot recall the exact order at the moment)

Adjust the size of the mouse cursor in real time

Answer №1

Answer №2

Similar questions

Utilizing Angular's Local Storage Module to efficiently store and manage various elements within an array in Local Storage

Adding various image files to the canvas

Guard your website against Backdoor/PHP.C99Shell, also known as Trojan.Script.224490

"An error occurred while trying to access the data for a new user on the snapshot object while navigating to the screen. It seems that the object is

How can JavaScript be used to create a unique signup and login process on

Calculating the total of an array's values using JavaScript

Designing a table with specific limitations on the width of each column

Improprove the performance of external banner ads by utilizing asynchronous loading or caching techniques

How can I keep the cursor in place while editing a phone number field on Sencha ExtJS?

Ways to align items in the middle of a list

The function does not provide an output of an Object

Using jQuery to trigger alert only once variable has been updated

Guide to Subscribing to a nested observable with mergeMap within a button's click event

Attempting to alert a particular device using Flutter for notification delivery

What is the method for including a TabIndex property in a JSON file?

Encountering a jQuery error while attempting to initiate an AJAX request

send JSON data to a Spring MVC endpoint

What is the process for transferring a JSON data object to the server with JavaScript XMLHttpRequest?

Switch out the arrow icon in the dropdown menu with an SVG graphic

In HTML, an important concept to understand is how float:left is necessary when the combined widths of child blocks equal