The first thing we will implement in our Canvas2D object is a way to convert page coordinates to canvas coordinates. Then we will use that to show the mouse coordinates on the page as the user moves their mouse over the canvas.

The problem with mouse coordinates is that they are always offset from the top left of the web page. To get the canvas coordinates we need to find the offset of the <canvas> element on the page and subtract it from the page coordinates.

First we need a variable named pageOffset to hold the offset of the canvas element. We'll set its value using jQuery's offset() method, which gets the page offset of an element. It returns an object with left and top fields:

var pageOffset = $canvas.offset();

Now we add a getCanvasPoint() method. It takes the pageX and pageY parameters, subtracts the canvas element offsets, and returns a new object with x and y fields to hold the adjusted coordinates:

this.getCanvasPoint = function(pageX, pageY)
{
    return {
        x: pageX - pageOffset.left,
        y: pageY - pageOffset.top
    }
};

Since our canvas is centered on the page, whenever the size of the window changes the offset of the canvas will change as well. So we need to add a resize event handler to the window so that whenever it changes the pageOffset variable gets updated:

$(window).resize(function() { pageOffset = $canvas.offset(); });

Now let's add the code to show the mouse coordinates in the status bar when the user moves the mouse over the canvas. First we need an instance of the Canvas2D object in our application's main class, CanvasPadApp. We will assign it to a private variable named canvas2d:

function CanvasPadApp()
{
    var version = "4.1",
        canvas2d = new Canvas2D($("#main>canvas"));
    // ...

We will show the coordinates in the <footer> element below the canvas. Let's add a <span> in the footer to hold the coordinates:

<footer>
  <span id="coords">0, 0</span>
</footer>

Next we add a mousemove event handler to the <canvas> element in the start() method. It will call onMouseMove when the mouse is moved:

this.start = function()
{
    $("#app header").append(version);
    $("#main>canvas").mousemove(onMouseMove);
}

The onMouseMove event handler calls the canvas2d.getCanvasPoint() method passing in the page coordinates from the mouse event. It gets back the position of the mouse on the canvas and passes that into the showCoordinates() method to display them in the footer:

function onMouseMove(e)
{
    var canvasPoint = canvas2d.getCanvasPoint(e.pageX, e.pageY);
    showCoordinates(canvasPoint);
}
function showCoordinates(point)
{
    $("#coords").text(point.x + ", " + point.y);
}

The showCoordinates() method uses jQuery's text() method to put the coordinates into the footer. Now if you move the mouse over the canvas on the page you will see the coordinates change. When you move the mouse to the top-left corner it should display (0, 0).