How to make animated canvas shapes follow cursor

Question

I've made some pacman-like shapes that are animated on an html5 canvas and currently only move back and forth in 1 dimension. The program currently has a feature for directional buttons that change the path of the shapes, but I need the shapes to simply follow the cursor coordinates and not just travel in one direction. Currently, I'm getting the coordinates of the mouse using this:

function readMouseMove(e) {
            var result_x = document.getElement('x_result');
            var result_y = document.getElement('y_result');
            result_x.innerHTML = e.clientX;
            result_y.innerHTML = e.clientY;
        }
        document.onmousemove = readMouseMove;
        var xR = document.getElementById("x_result");
        var yR = document.getElementById("y_result");
        var x = xR.innerHTML
        var y = yR.innerHTML

As I'm having to make elements and extract the innerHTML of the cursor coordinates, I don't think this is the most efficient way to do this. I have a function object for each pacman shape that has attributes of its x and y positions (which shift based on the direction input), and the size and speed so I'm looking for a way to continuously set the x and y attributes for each object inside of my animationLoop. I don't really want to use jquery as is done here, as I'm using canvas transformations so what would be the best way to go about doing this? I have the code for the animation loop below for reference, thanks:

function animationLoop() {
            canvas.width = canvas.width;
            renderGrid(20, "red");
            for (var i = 0; i < WokkaWokkas.length; i++) {
                //WWM is the name of each pacman object
                var WWM = WokkaWokkas[i];
                renderContent(WWM);
                setAngles(WWM);
                //used for the direction input
                switch (WWM.direction) {
                    case up:
                        WWM.posY -= WWM.speed;
                        if (WWM.posY <= 0) WWM.direction = down;
                        break;
                    case down:
                        WWM.posY += WWM.speed;
                        if (WWM.posY > 600) WWM.direction = up;
                        break;
                    case left:
                        WWM.posX -= WWM.speed;
                        if (WWM.posX < 0) WWM.direction = right;
                        break;
                    case right:
                        WWM.posX += WWM.speed;
                        if (WWM.posX > 600) WWM.direction = left;
                        break;
                }
            }

Can you not try something like this `canvasHolder.addEventListener("mousedown", mouseClicked, false); function mouseClicked( e ) { console.log( "Xpos:" + e.x + ", Ypos:" + e.y); }`. This will give you the mouse position but it is offset from the canvas position so you may need to change it a little — Canvas, Oct 13 '15 at 07:55
@Canvas Will this give the position for when the mouse is moved though? Because, the user doesn't need to click the mouse, they only need to drag it and have the objects follow. Also, is this function supposed to be called within the animationLoop? — loremIpsum1771, Oct 13 '15 at 16:30

How to make animated canvas shapes follow cursor

0 Answers0