Follow the Mouse Cursor

programming
9

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 :stuck_out_tongue:

10

ok :slight_smile: 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/

11

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

12

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.

13

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

14

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

15

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

16

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 :slight_smile:

18

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

19

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

20

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.

21

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 :slight_smile:

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 here)

1 Like
22

You learn something new every day.
Thank you so much! :smile: -)

1 Like
23

Thank you for this. I will see if I can make it work for my situation.

1 Like
24

Hey!

Thank you soo much Kirupa for sharing such an amazing thing… I tried your code it works Great!

I just wanna know… Can We place the moving object at any place we want to on the canvas and after that stop follow mouse cursor?

Also Can we do similar thing in the Konva React Canvas?

25

Can you clarify what you mean by placing the object anywhere and stopping the follow effect?

26

For example, When cursor came to the canvas then the shape will follow mouse moves… And when I click on any where in the canvas then on click event the shape will place on the canvas and no movements will occur after that…

How can we do that ?

27

Ah, gotcha! What you need is a variable that determines whether the shape should follow the mouse or not. You can use that variable to stop the requestAnimationFrame call from looping and animating the shape. Here is a rough example:

var toAnimate = true;

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height);
 
  context.beginPath();
  context.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();

  if (toAnimate) {
    requestAnimationFrame(update);
  }
}

When you click, you can set toAnimate to false. That will do the trick.

Cheers,
Kirupa

28

Yeah! it works Great!

Thanks! :slight_smile: :+1:

29

Hii Kirupa,

Can we do mouse follow thing with the konva canvas ?

I have tried your example with HTML5 canvas… It works Awesome!
But, When I implement it in konva… I am facing issues.

If possible can you please share same example with the konva canvas please?