You learn something new every day.
Thank you so much! 
-)
1 Like
Thank you for this. I will see if I can make it work for my situation.
1 Like
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?
Can you clarify what you mean by placing the object anywhere and stopping the follow effect?
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 ?
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
Yeah! it works Great!
Thanks! 
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?
I havenāt used konva canvas before. I wouldnāt even know where to begin!
No worries 
I have implemented the functionality in konva
1 Like
Hello!
I have put the code in my document and for some reason the animation effect is not applied to my cursor. I think my javascript isnāt reading it properly.
If I have other elements in my javascript can these affect my code ?
You can see my code here : http://pasted.co/05a08bf1
Peter - so sorry for having missed this! Are you still having issues?
We good! I solved it, now I want to link an image instead of the circle which shouldnāt be that hard?
I also want to add a function where you can add your own image (face) as the cursor, is this possible?
Totally doable. Do you need this functionality to be inside the canvas? It may be easier to do this if it is entirely on the DOM.
Hi, this tutorial really helps me to understand how the canvas and mouse works. Thank you! Can you farther explain " When you click, you can set toAnimate to false . That will do the trick." please? when AmanDhiman asked about how to do this follow function āwhen I click on anywhere in the canvas than on click event the shape will place on the canvas, and no movements will occur after thatā on above comment, I tried but I am not able to make this work. What I have been attempting were add a removeEventlistner to the else operation, and click Eventlistner.
Thank you!
Could you explain why using requestAnimationFrame avoids unnecessary work. The frequency of mousemove events is no more than requestAnimationFrame.
mousemove should happen a lot more than requestAnimationFrame. You can test this by throwing some code like whats below in your console and moving your mouse around:
requestAnimationFrame(function raf () {
console.log('raf')
requestAnimationFrame(raf)
})
window.addEventListener('mousemove', event => {
console.log('mm')
})
This is what Iām seeing on macbook pro chrome
Thats, on average, a little more than about 16 mousemove events (mm) for every requestAnimationFrame (raf).
1 Like
ok, thanks, I got it. Iāve ever run code with the same logic as yours on Windows10 machine, but got the misunderstanding result showing as the picture.
There is a discrepancy between your and my run results. Thus I discover itās because the OS(Windows) which I ran code on limits the frequency of mousemove event.
