Rotate with Mouse

# How to make an object face the mouse in Canvas? **URL:** \ **Category:** web dev\ **Created:** [December 13, 2019, 6:30pm UTC](https://forum.kirupa.com/t/how-to-make-an-object-face-the-mouse-in-canvas/641330 "2019-12-13T18:30:55Z")\ **Posts on this page:** 6\ **Page:** 1

**Author:** ![brilliant](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/brilliant/32/10552_2.png) [@brilliant](https://forum.kirupa.com/u/brilliant)\ **Post date:** [December 13, 2019, 6:30pm UTC](https://forum.kirupa.com/t/how-to-make-an-object-face-the-mouse-in-canvas/641330/1 "2019-12-13T18:30:55Z")

Hello there. I am wondering how to make an object rotate to face the current position of the mouse in a canvas. I am not sure if this is a question yet but I am keen to knowing how to do this. For example, in [agar.io](https://agar.io), you are a circle which follows your mouse. ---

**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:** [December 14, 2019, 2:47am UTC](https://forum.kirupa.com/t/how-to-make-an-object-face-the-mouse-in-canvas/641330/3 "2019-12-14T02:47:47Z")

This is a great question! It is one I don’t have an answer for right now, and I’m currently fiddling with a solution for you. I did a quick search, and this may help you in the interim: [https://stackoverflow.com/questions/40120470/javascript-making-image-rotate-to-always-look-at-mouse-cursor](https://stackoverflow.com/questions/40120470/javascript-making-image-rotate-to-always-look-at-mouse-cursor) 😛 ---

**Author:** ![brilliant](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/brilliant/32/10552_2.png) [@brilliant](https://forum.kirupa.com/u/brilliant)\ **Post date:** [December 14, 2019, 11:44am UTC](https://forum.kirupa.com/t/how-to-make-an-object-face-the-mouse-in-canvas/641330/4 "2019-12-14T11:44:09Z")

Thank You! Exactly what I was looking for. I normally do use Stack Overflow but I guess this works better! 🙂 ---

**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:** [December 14, 2019, 9:40pm UTC](https://forum.kirupa.com/t/how-to-make-an-object-face-the-mouse-in-canvas/641330/5 "2019-12-14T21:40:26Z")

Glad to hear you are unblocked 😀 There are several things with the SO solution that aren’t ideal. I wouldn’t use the slower `getBoundingClientRect` to get the mouse position relative to any offsets on the page. I would use `getMousePosition` from here: [https://www.kirupa.com/canvas/follow\_mouse\_cursor.htm](https://www.kirupa.com/canvas/follow_mouse_cursor.htm) There are a few areas where I would just use `requestAnimationFrame` instead of _mousemove_, and I will try to provide you with a working solution in a couple of days. ---

**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:** [December 16, 2019, 11:40pm UTC](https://forum.kirupa.com/t/how-to-make-an-object-face-the-mouse-in-canvas/641330/6 "2019-12-16T23:40:41Z")

Here is my take on this that addresses some of the perf issues I outlined in my earlier response: ``` Rotate with Mouse

``` You can see a video of this in the following tweet: > This is based largely on combining the contents of the [Follow the Mouse Cursor](https://www.kirupa.com/canvas/follow_mouse_cursor.htm), [Drawing a Triangle](https://www.kirupa.com/html5/drawing_triangles_on_the_canvas.htm), [Canvas Transformations](https://www.kirupa.com/canvas/canvas_transformations.htm), and [Get an Element’s Position](https://www.kirupa.com/html5/get_element_position_using_javascript.htm) articles. 😉 ---

**Author:** ![brilliant](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/brilliant/32/10552_2.png) [@brilliant](https://forum.kirupa.com/u/brilliant)\ **Post date:** [December 17, 2019, 10:41am UTC](https://forum.kirupa.com/t/how-to-make-an-object-face-the-mouse-in-canvas/641330/7 "2019-12-17T10:41:51Z")

Amazing! Thank You So Much!