Mouse coordinates

previous next

To get mouse coordinates to work on canvas we need to understand the page geometry. Mouse events belong to the "page" and not to any individual element. Therefore, mouse coordinates are defined with respect to (top left corner of) the page. These coordinates are usually denoted by pageX and pageY.

Each element, such as a canvas, has a position relative to the page. These are known as the left and top offsets (i.e. offsetLeft, offsetTop). Once we know these offsets, we can compute the X and Y coordinates within an element as

X = pageX - offsetLeft;
Y = pageY - offsetTop;

Try running the hidden code and move your mouse cursor within the canvas. Please, make sure that you move it within the "fake canvas" - what this is will become clear when you run the code. You will see a simulation of the above explanation where I have set things up to make the normal cursor disappear inside the fake canvas.

// quick hack
var ctx = $('#game-canvas')[0].getContext("2d");

var canvasMinX = $("#game-canvas").offset().left;
var canvasMaxX = canvasMinX + 300;
var canvasMinY = $("#game-canvas").offset().top;
var canvasMaxY = canvasMinY + 300;
var canX;
var canY;
var draw_mouse = true;
var ar1, ar2, ar3, ar4;

$(document).mousemove(onMouseMove);

var mouse = function() {
    ctx.beginPath();
    ctx.fillStyle = "#0000aa";
    ctx.arc(canX, canY, 5, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
};

function FakeCanvas(){

this.draw = function(){
    ctx.beginPath();
    ctx.fillStyle = "#ffffcc";
    ctx.strokeStyle = "#aaaa77";
    ctx.rect(100, 120, 150, 150);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
}

function HorizontalArrow(x1, y1, colour) {
   this.x1 = x1 + 0.5;
   this.y1 = y1 + 0.5;
   this.colour = colour;
   this.del = 5;

this.draw = function (x2, y2) {
   ctx.beginPath();
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 - this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 + this.del);
   ctx.moveTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 - this.del);

ctx.strokeStyle = this.colour;
   ctx.stroke();
   }
}

function VerticalArrow(x1, y1, colour) {
   this.x1 = x1 + 0.5;
   this.y1 = y1 + 0.5;
   this.colour = colour;
   this.del = 5;

this.draw = function (x2, y2) {
   ctx.beginPath();
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 - this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 - this.del);
   ctx.moveTo(x2, y2);
   ctx.lineTo(x2 + this.del, y2 - this.del);

ctx.strokeStyle = this.colour;
   ctx.stroke();
   }
}

ar1 = new HorizontalArrow(0, 125, "#000000");
ar2 = new VerticalArrow(105, 0, "#000000");
ar3 = new HorizontalArrow(0, 200, "#0000cc");
ar4 = new VerticalArrow(200, 0, "#0000cc");

ar5 = new HorizontalArrow(100, 200, "#cc0000");
ar6 = new VerticalArrow(200, 120, "#cc0000");

function Info() {
    this.draw = function() {

ar3.y1 = canY-3;
ar3.draw(canX-7, canY-3);
ctx.font = "10pt Helvetica";
ctx.fillStyle = "#0000aa";
ctx.fillText("pageX", Math.min(canX/2, 30), canY-10);
ar4.x1 = canX-3;
ar4.draw(canX-3, canY-7);
ctx.font = "10pt Helvetica";
ctx.fillStyle = "#0000aa";
ctx.fillText("pageY", canX, Math.min(canY/2, 80));

if (canX > 100 && canX < 250
        && canY > 120  && canY < 270 ) {

ar5.y1 = canY+3;
ar5.draw(canX-7, canY+3);
ctx.font = "10pt Helvetica";
ctx.fillStyle = "#aa0000";
ctx.fillText("X", (canX + 100)/2, canY+20);
ar6.x1 = canX+3;
ar6.draw(canX+3, canY-7);
ctx.font = "10pt Helvetica";
ctx.fillStyle = "#aa0000";
ctx.fillText("Y", canX+10, (canY + 120)/2);
$("#game-canvas").css("cursor", "none");
    }
    else {$("#game-canvas").css("cursor", "auto");
    }
  }
}
info = new Info();

function MovingText(x, y, text) {
    this.x = x;
    this.y = y;
    this.text = text;

this.draw = function() {
    ctx.font = "15pt Helvetica";
    ctx.fillStyle = "#0000aa";
    ctx.fillText(this.text, this.x, this.y);
    }
}

can = new FakeCanvas();

function update() {

ctx.clearRect(0, 0, 300, 300);

ctx.font = "20pt Helvetica";
ctx.fillStyle = "#99cc99";
ctx.fillText("Page", 5, 25);

can.draw();

ctx.font = "10pt Helvetica";
ctx.fillStyle = "#000000";
ctx.fillText("offsetLeft", 30, 120);
ar1.draw(100, 125);

ctx.font = "10pt Helvetica";
ctx.fillStyle = "#000000";
ctx.fillText("offsetTop", 45, 70);
ar2.draw(105, 120);

ctx.font = "20pt Helvetica";
ctx.fillStyle = "#aaaa77";
ctx.fillText("Canvas", 120, 200);

info.draw();
if (draw_mouse){
  mouse();
  }
}

setInterval(update, 40);

Once you will have done this,we will be ready to go back to our game, and incorporate mouse control.

previous next

Reeborg

Programming tutorials