How can I drag a drawn circle within a canvas?

I am coding up an assignment where I have to drag a circle drawn inside the canvas on top of an image of cheese and change another image of a mouse to mice celebrating. I've tried adding a mousemove event listener to detect the mouse pointer over the circle, and adding an if statement to see if the mouse pointer's X/Y values are greater than X/Y values. I want to do this using requestAnimationFrame.

        canvas.addEventListener("mousemove", setMousePosition, false);
        function setMousePosition(e) 
        {
            mouseX = e.clientX - canvasPos.x;
            mouseY = e.clientY - canvasPos.y;
        }
        function update() 
        {
            context.clearRect(0,0,canvas.width, canvas.height);
            drawText();
            loadCheese();
            loadMouse();
            drawLine();
            context.beginPath();
            var x = context.arc(mouseX,mouseY,40,0,2*Math.PI, true);
            context.fillStyle = "#FF6A6A";
            context.fill();
            context.stroke();

            requestAnimationFrame(update);

        }

This is my base code, which essentially makes the circle follow my cursor. The event handler corrects the mouse coordinates relative to my browser. update() draws all the necessary elements.

Solution

I'm glad you found it useful.

this got a tiny bit too long for a comment so..

yes, utilize the matrix. it's not hard and makes sense if you look close enough :)

start with a square as other shapes require some extra math if you want it to be perfect. though extra math means less performance. thus a lot of game developers use square/cubed bounding boxes/hitboxes for collision detection.

oh and a small tip: keep away from decimals as floating points are more expensive. but JS rounding/Math methods can be worse so bit manipulation works great here(and other places too)

here's something for rounding:

// some quicker math
export const bitshift = {

   // this is for decimals only
   round_d: d => (d + (d > 0 ? 0.5 : -0.5)) << 0,

   // and with a multiple we round by the number we pass
   // to the second argument
   /** d: domain, m: multiple */
   round_m: (d, m = 1) => ((d / m + (d > 0 ? 0.5 : -0.5)) << 0) * m
}

basically bit shifting, if you're not familiar with it, is moving the 1s and 0s in one or the other direction in a Byte. by shifting left you get multiplication by 2 and division by 2 when shifting right, e.g:

0010 is 2
0100 is 4
0001 is 1

as you can imagine, doing actual math requires a lot more steps, and even if bit manipulation can be a little less accurate a few times because of how computers work. it's well worth knowing.

as for collission detection, here's a simple one for squares:

if (
   rx < x  + w && 
   rx + rw > x && 
   ry < y  + h && 
   rh + ry > y
)
   collided!

and for some heavy reading: http://www.jeffreythompson.org/collision-detection/matrix-transformations.php

best of luck and have fun! =)