# Follow the Mouse Cursor

**URL:** <https://forum.kirupa.com/t/follow-the-mouse-cursor/636212>\
**Category:** programming\
**Created:** [March 20, 2017, 2:52am UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212 "2017-03-20T02:52:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 20, 2017, 2:52am UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/1 "2017-03-20T02:52:26Z")

</div>

This is a companion discussion topic for the original entry at [http://www.kirupa.com/canvas/follow\_mouse\_cursor.htm](http://www.kirupa.com/canvas/follow_mouse_cursor.htm) :slight\_smile:

---

<div class="post-metadata">

**Author:** ![anguyen](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@anguyen](https://forum.kirupa.com/u/anguyen)\
**Post date:** [April 3, 2017, 4:03pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/2 "2017-04-03T16:03:08Z")

</div>

Sorry for coming this late but I’m currently working on this kinda stuff. And I know that this tutorial only works for white background as the whole canvas is removed whenever the mouse cursor moves, but in my case, there is an img tag in background, as a result it would remove the img as well. Hence, do you have any idea to fix this? Any comments will be appreciated.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 3, 2017, 5:44pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/3 "2017-04-03T17:44:21Z")

</div>

Are you using a canvas to have the element follow the mouse? If not, there may be an easier way using the DOM APIs 🙂

---

<div class="post-metadata">

**Author:** ![anguyen](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@anguyen](https://forum.kirupa.com/u/anguyen)\
**Post date:** [April 3, 2017, 6:08pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/4 "2017-04-03T18:08:57Z")

</div>

I’m not sure if I get your question but what I have done is exactly what you wrote in the tutorial up there 🙂 The only difference is that somehow the way using mouseX = e.clientX - canvasPos.x; doesnt help me get the exact position of the mouse, then I had to use mouseX = e.pageX - $(this).offset().left; instead.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 3, 2017, 11:05pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/5 "2017-04-03T23:05:03Z")

</div>

Do you have a link to your example?

What I meant by my canvas question is this: for most cases, you don’t need to use the canvas to draw a shape and move it around. If you are not going to be relying on the canvas for additional functionality, you may be better off using a simple `div` element and moving that around the screen instead 😛

I go into a bit more detail on the differences here: [https://www.kirupa.com/html5/dom\_vs\_canvas.htm](https://www.kirupa.com/html5/dom_vs_canvas.htm)

---

<div class="post-metadata">

**Author:** ![anguyen](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@anguyen](https://forum.kirupa.com/u/anguyen)\
**Post date:** [April 4, 2017, 8:45am UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/6 "2017-04-04T08:45:13Z")

</div>

[http://dpaste.com/3PZP0G2](http://dpaste.com/3PZP0G2) Here is the link to my code currently. So yeah I’m using canvas to get the element follow the mouse. Could you pls guide me how to get it by DOM APIs?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 5, 2017, 6:21pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/7 "2017-04-05T18:21:38Z")

</div>

Sure! Do you need it constrained to a particular area? Or will it be throughout the entire page similar to replacing your current cursor with a custom one? 🙂

For the entire page, here is an example: [http://codepen.io/kirupa/pen/RpOOxW](http://codepen.io/kirupa/pen/RpOOxW)

The full code is:

```
<!DOCTYPE html>
<html>

<head>
    <title>Follow Mouse!</title>

    <style>
        body {
            min-width: 100%;
            min-height: 100%;
        }
        #moveItem {
            width: 75px;
            height: 75px;
            background-color: #FF3333;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="moveItem"></div>
    <script>
        var item = document.querySelector("#moveItem");
        var itemRect = item.getBoundingClientRect();

        document.addEventListener("mousemove", followMouse, false);

        function followMouse(e) {
            var xPos = e.pageX - itemRect.width / 2;
            var yPos = e.pageY - itemRect.height / 2;

            console.log(xPos + " " + yPos);

            item.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    </script>
</body>

</html>
```

---

<div class="post-metadata">

**Author:** ![anguyen](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@anguyen](https://forum.kirupa.com/u/anguyen)\
**Post date:** [April 5, 2017, 8:37pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/8 "2017-04-05T20:37:44Z")

</div>

Thank you so very much for helping me out! Yeah it should be just in a particular area, like in my case it’s an image. I’m taking a look at ur code and trying to figure it out 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 5, 2017, 9:38pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/9 "2017-04-05T21:38:35Z")

</div>

Let me know if you get stuck on that, and I can try to create a sample. You’ll find that this DOM approach is much easier to handle when working with backgrounds made up of images, gradients, and other non-simple things 😛

---

<div class="post-metadata">

**Author:** ![anguyen](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@anguyen](https://forum.kirupa.com/u/anguyen)\
**Post date:** [April 6, 2017, 7:47am UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/10 "2017-04-06T07:47:04Z")

</div>

ok 🙂 I have a couple of questions. Why would you use the listener? and what constrained it to be in a specific area? I have googled out and here is what I got [http://jsfiddle.net/3964w/1219/](http://jsfiddle.net/3964w/1219/)

---

<div class="post-metadata">

**Author:** ![anguyen](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@anguyen](https://forum.kirupa.com/u/anguyen)\
**Post date:** [April 6, 2017, 7:51am UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/11 "2017-04-06T07:51:51Z")

</div>

Sorry, it’s this one [http://jsfiddle.net/3964w/1220/](http://jsfiddle.net/3964w/1220/)

---

<div class="post-metadata">

**Author:** ![anguyen](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@anguyen](https://forum.kirupa.com/u/anguyen)\
**Post date:** [April 6, 2017, 10:49am UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/12 "2017-04-06T10:49:30Z")

</div>

ok I seem to nearly figure it out. But still getting stuck in positioning the follower , in my case it’s a square, so that its top left corner could fit perfectly to the mouse cursor , been trying to set xPos = e.pageX but not succeeded. And let’s say I have a container div (imagine it as the image tag in my case) that wraps up the follower div.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 6, 2017, 4:48pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/13 "2017-04-06T16:48:36Z")

</div>

From looking at your fiddle, it seems like the mouse cursor is set to the top-left corner of the square 😛

---

<div class="post-metadata">

**Author:** ![anguyen](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@anguyen](https://forum.kirupa.com/u/anguyen)\
**Post date:** [April 6, 2017, 6:34pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/14 "2017-04-06T18:34:44Z")

</div>

yea it’s supposed to be so, but in fact they are too far away from each other…

---

<div class="post-metadata">

**Author:** ![sh1nt4r0](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@sh1nt4r0](https://forum.kirupa.com/u/sh1nt4r0)\
**Post date:** [April 13, 2017, 4:42pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/15 "2017-04-13T16:42:14Z")

</div>

I have your code exactly perfect but i get this error:  
Uncaught TypeError: Cannot read property ‘addEventListener’ of undefined

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 13, 2017, 4:59pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/16 "2017-04-13T16:59:00Z")

</div>

Strange. It means the element you are calling `addEventListener` on is undefined. Can you check if your `querySelector` call is going for the correct element? If you can post your code, that will also help figure out what is going on 🙂

---

<div class="post-metadata">

**Author:** ![HELPO](https://avatars.discourse-cdn.com/v4/letter/h/71c47a/32.png) [@HELPO](https://forum.kirupa.com/u/HELPO)\
**Post date:** [August 7, 2017, 9:05am UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/18 "2017-08-07T09:05:14Z")

</div>

Hello  
I love this!!! So useful. I am trying to modify the code so that it does actually leave a cool finger painting effect on the full HTML page. I have tried everything within my limited knowledge but nothing is working.  
Please help. Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 7, 2017, 3:34pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/19 "2017-08-07T15:34:55Z")

</div>

Are you using a `canvas` element to leave the finger painting effect?

---

<div class="post-metadata">

**Author:** ![HELPO](https://avatars.discourse-cdn.com/v4/letter/h/71c47a/32.png) [@HELPO](https://forum.kirupa.com/u/HELPO)\
**Post date:** [August 7, 2017, 3:51pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/20 "2017-08-07T15:51:00Z")

</div>

Hi,  
I have tried using canvas, and that seems to work for the finger painting effect-The effect am trying to use is so that the whole HTML can have the whole finger painting effect.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 7, 2017, 4:08pm UTC](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212/21 "2017-08-07T16:08:11Z")

</div>

You can overlay the canvas on top of your HTML elements. With a transparent background, it will look as if you are finger-painting over your HTML content 🙂

The reason why I prefer the canvas approach is performance. You can simulate this effect on HTML using DOM elements where for every few pixels of movement, you place an HTML element at the location of your finger or mouse cursor. For a lot of elements, that can start to get really memory intensive. (I outline the [differences between the DOM and Canvas](https://www.kirupa.com/html5/dom_vs_canvas.htm) here)

[Next page](https://forum.kirupa.com/t/follow-the-mouse-cursor/636212.md?page=2)