simple.js rotate character “circle” after mouse :? – Blancer.com Tutorials and projects

So I’ve tried messing around with an old js library we used in school to make a fun little game with.
(im not very good)

What im trying to do is have a circle as a “character” then say that character holds something.

From a Birds Eye view I want that held item to always point towards the mouse.

This is the code I came up with so far, im stuck with rotating what seems to be everything consistently always instead of pointing the item or “rectangle” towords the mouse.

To make it even more clear:

one side of the rectangle will be stuck in the character or “circle” at all times then rotating around that circle so that it always points towards the mouse.

Please explain it to me as if I were 10 as ive forgotten a lot from when I use to mess with this:)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="http://koda.nu/simple.js">
        var player = {
            x: 200,
            y: 200,
        }

        drawPlayer = function(angle) {
            var face = {x:200,y:200}
            rectangle(face.x, face.y, 100, 100, "red")
            
            var angle = Math.atan2(mouse.y - player.y, mouse.x - player.x) * 180 / Math.PI;
            translate(face.x, face.y)
            rotate(angle);
        }

        function update(){
            clearScreen();
            circle(player.x, player.y, 40, "blue")
            drawPlayer();
            circle(900, 900, 30, "green")
        }
    </script>
</body>
</html>