Mouse coordinates don't match after Scaling and Panning canvas

Question

I'm very new to javascript and canvas and I have a program that's supposed to detect elements animated on an elliptical path. It later on goes to form a tree.. But this is the basic structure that I've linked onto jsfiddle. It works fine without scaling or panning but as soon as I try to scale or Pan, the mouse coordinates go haywire. I tried following markE's advice from HTML5 canvas get coordinates after zoom and translate But i'm definitely doing something wrong and I've clearly not understood whats happening with the canvas and the transformation matrix. I've spent about 3 days trying to change all the combinations I can think of but I can't seem to figure it out :s

SOLVED: Here's my code with zooming and mouse panning and for animating and detecting elements on an ellipse: http://jsfiddle.net/metalloyd/A8hgz/

            theCanvas = document.getElementById("canvasOne");
            context = theCanvas.getContext("2d");
            var status = document.getElementById('status');
            var $canvas = $("#canvasOne");
            var canvasOffset = $canvas.offset();
            var offsetX = canvasOffset.left;
            var offsetY = canvasOffset.top;
            var scrollX = $canvas.scrollLeft();
            var scrollY = $canvas.scrollTop();
            var cw = theCanvas.width;
            var ch = theCanvas.height;
            var scaleFactor = 1.00;
            var panX = 0;
            var panY = 0;

            var mainX = 250;
            // setting the middle point position X value
            var mainY = 100;
            // setting the middle point position Y value
            var mainR = 125;
            // main ellipse radius R
            var no = 5;
            // number of nodes to display
            var div_angle = 360 / no;

            var circle = {
                centerX: mainX,
                centerY: mainY + 100,
                radius: mainR,
                angle: .9
            };

            var ball = {
                x: 0,
                y: 0,
                speed: .1
            };
            var a = 1.8;
            //Ellipse width
            var b = .5;
            //Ellipse height

           //Scale and Pan variables
            var translatePos = {
                x: 1,
                y: 1
            };
            var startDragOffset = {};
            var mouseDown = false;

            var elements = [{}];

            // Animate
            var animateInterval = setInterval(drawScreen, 1);

            //Animation
            function drawScreen() {
                context.clearRect(0, 0, cw, ch);
                // Background box
                context.beginPath();
                context.fillStyle = '#EEEEEE';
                context.fillRect(0, 0, theCanvas.width, theCanvas.height);
                context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);
                context.closePath();

                context.save();
                context.translate(panX, panY);
                context.scale(scaleFactor, scaleFactor);

                ball.speed = ball.speed + 0.001;

                for (var i = 1; i <= no; i++) {
                    // male
                    new_angle = div_angle * i;
                    //Starting positions for ball 1 at different points on the ellipse
                    circle.angle = (new_angle * (0.0174532925)) + ball.speed;
                    //elliptical x position and y position for animation for the first ball
                    //xx and yy records the first balls coordinates
                    xx = ball.x = circle.centerX - (a * Math.cos(circle.angle)) * (circle.radius);
                    yy = ball.y = circle.centerY + (b * Math.sin(circle.angle)) * (circle.radius);
                    //Draw the first ball with position x and y
                    context.fillStyle = "#000000";
                    context.beginPath();
                    context.arc(ball.x, ball.y, 10, 0, Math.PI * 2, true);
                    context.fill();
                    context.closePath();

                    //alert("male Positions "+"X:  "+ball.x+ " Y: "+ball.y);

                    // female
                    new_angle = div_angle * i + 4;
                    //Starting positions for ball 2 at different points on the ellipse
                    circle.angle = (new_angle * (0.0174532925)) + ball.speed;
                    //elliptical x position and y position for animation for the second ball
                    //ball.x and ball.y record the second balls positions
                    ball.x = circle.centerX - (a * Math.cos(circle.angle)) * (circle.radius);
                    ball.y = circle.centerY + (b * Math.sin(circle.angle)) * (circle.radius);
                    context.fillStyle = "#000000";
                    context.beginPath();
                    context.arc(ball.x, ball.y, 10, 0, Math.PI * 2, true);
                    context.fill();
                    context.closePath();

                    //alert("female Positions "+"X:  "+ball.x+ " Y: "+ball.y);

                    //Record the ball positions in elements array for locating positions with mouse coordinates.
                    elements[i] = {
                        id: i,
                        femaleX: ball.x,
                        femaleY: ball.y,
                        maleX: xx,
                        maleY: yy,
                        w: 10 //radius of the ball to draw while locating the positions
                    };
                    //Text Numbering
                    context.beginPath();
                    context.fillStyle = "blue";
                    context.font = "bold 16px Arial";
                    context.fillText(elements[i].id, ball.x - 20, ball.y + 20);
                    context.closePath();
                    // line drawing--Connecting lines to the balls from the center.
                    context.moveTo(mainX, mainY);
                    context.lineTo((ball.x + xx) / 2, (ball.y + yy) / 2);
                    //Draw line till the middle point between ball1 and ball2
                    context.stroke();
                    context.fill();
                    context.closePath();
                }
                // center point
                context.fillStyle = "#000000";
                context.beginPath();
                context.arc(mainX, mainY, 15, 0, Math.PI * 2, true);
                context.fill();
                context.closePath();

                context.restore();
            }

            // Event Listeners
            // Mouse move event to alert the position of the ball on screen


            document.getElementById("plus").addEventListener("click", function () {
                scaleFactor *= 1.1;
                drawScreen();
            }, false);

            document.getElementById("minus").addEventListener("click", function () {
                scaleFactor /= 1.1;
                drawScreen();
            }, false);

            // Event listeners to handle screen panning
            context.canvas.addEventListener("mousedown", function (evt) {
                mouseDown = true;
                startDragOffset.x = evt.clientX - translatePos.x;
                startDragOffset.y = evt.clientY - translatePos.y;
            });

            context.canvas.addEventListener("mouseup", function (evt) {
                mouseDown = false;
            });

            context.canvas.addEventListener("mouseover", function (evt) {
                mouseDown = false;
            });

            context.canvas.addEventListener("mouseout", function (evt) {
                mouseDown = false;
            });

            context.canvas.addEventListener("mousemove", function (evt) {
                if (mouseDown) {
                    translatePos.x = evt.clientX - startDragOffset.x;
                    translatePos.y = evt.clientY - startDragOffset.y;

                    panX = translatePos.x;
                    panY = translatePos.y;

                    drawScreen();
                }

                evt.preventDefault();
                evt.stopPropagation();

                var mouseX = parseInt(evt.clientX - offsetX);
                var mouseY = parseInt(evt.clientY - offsetY);

                var mouseXT = parseInt((mouseX - panX) / scaleFactor);
                var mouseYT = parseInt((mouseY - panY) / scaleFactor);

                status.innerHTML = mouseXT + " | " + mouseYT;

                for (var i = 1; i < elements.length; i++) {
                    var b = elements[i];
                    context.closePath();
                    context.beginPath();
                    context.arc(b.femaleX, b.femaleY, 10, 0, Math.PI * 2);
                    context.arc(b.maleX, b.maleY, 10, 0, Math.PI * 2);

                    if (context.isPointInPath(mouseXT, mouseYT)) {
                        theCanvas.style.cursor = 'pointer';
                        alert(b.id + " female.x: " + b.femaleX + " female.y: " + b.femaleY + " ball.x: " + ball.x + " ball.y: " + ball.y);
                        return;
                    } else theCanvas.style.cursor = 'default';
                    context.closePath();
                }

            });`

Solution

Using the transformation matrix is useful or even necessary in these circumstances:

• If you are deeply nesting transformations.
• If you are altering different drawings with different transforms.
• If you need interim transformation coordinates.
• If you are doing transformations involving skew.
• If you are doing transformations involving rotation.

But for the simpler case of panning and scaling the entire canvas there is a simpler method.

First, set up variables to hold the current amount of scaling and panning:

var scaleFactor=1.00;
var panX=0;
var panY=0;

Then use these pan & scale variables to do all your drawings.

• clear the canvas.
• save the untransformed canvas state.
• do translations with the panX variable.
• do scaling with the scaleFactor variable.
• draw all your elements as if they were in untranformed space.
• restore the context to its untransformed state.

Example code:

function drawTranslated(){

    ctx.clearRect(0,0,cw,ch);

    ctx.save();
    ctx.translate(panX,panY);
    ctx.scale(scaleFactor,scaleFactor);

    ctx.beginPath();
    ctx.arc(circleX,circleY,15,0,Math.PI*2);
    ctx.closePath();
    ctx.fillStyle=randomColor();
    ctx.fill();

    ctx.restore();

}

Now, about mouse coordinates:

The browser always returns the mouse position in untransformed coordinates. Your drawings have been done in transformed space. If you want to know where your mouse is in transformed space, you can convert untransformed mouse coordinates to transformed coordinates like this:

var mouseXTransformed = (mouseX-panX) / scaleFactor;
var mouseYTransformed = (mouseY-panY) / scaleFactor;

Here is example code and a Demo: http://jsfiddle.net/m1erickson/HwNp3/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();
    var cw=canvas.width;
    var ch=canvas.height;

    var scaleFactor=1.00;
    var panX=0;
    var panY=0;

    var circleX=150;
    var circleY=150;

    var $screen=$("#screen");
    var $transformed=$("#transformed");
    var $trx=$("#trx");

    drawTranslated();

    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#scaledown").click(function(){ scaleFactor/=1.1; drawTranslated(); });
    $("#scaleup").click(function(){ scaleFactor*=1.1; drawTranslated(); });
    $("#panleft").click(function(){ panX-=10; drawTranslated(); });
    $("#panright").click(function(){ panX+=10; drawTranslated(); });


    function drawTranslated(){
        ctx.clearRect(0,0,cw,ch);

        ctx.save();
        ctx.translate(panX,panY);
        ctx.scale(scaleFactor,scaleFactor);

        ctx.beginPath();
        ctx.arc(circleX,circleY,15,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=randomColor();
        ctx.fill();

        ctx.restore();

        $trx.text("Pan: "+panX+", Scale: "+scaleFactor);
    }

    function handleMouseMove(e){
        e.preventDefault();
        e.stopPropagation();

        var mouseX=parseInt(e.clientX-offsetX);
        var mouseY=parseInt(e.clientY-offsetY);

        var mouseXT=parseInt((mouseX-panX)/scaleFactor);
        var mouseYT=parseInt((mouseY-panY)/scaleFactor);

        $screen.text("Screen Coordinates: "+mouseX+"/"+mouseY);

        $transformed.text("Transformed Coordinates: "+mouseXT+"/"+mouseYT);
    }

    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h3>Transformed coordinates are mouseXY in transformed space.<br>The circles center is always at translated [150,150]</h3>
    <h4 id=screen>Screen Coordinates:</h4>
    <h4 id=transformed>Transformed Coordinates:</h4>
    <h4 id=trx>Pan & Scale</h4>
    <button id=scaledown>Scale Down</button>
    <button id=scaleup>Scale Up</button>
    <button id=panleft>Pan Left</button>
    <button id=panright>Pan Right</button><br>
    <canvas id="canvas" width=350 height=400></canvas>
</body>
</html>