Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I am trying to create an isometric game using HTML5 canvas, but don't know how to convert HTML5 canvas screen coordinates to isometric coordinates. My code now is:

var mouseX = 0;
var mouseY = 0;
function mouseCheck(event) {
    mouseX = event.pageX;
    mouseY = event.pageY;

which gives me canvas coordinates. But how do I convert these coordinates to isometric coordinates? I am using 16x16 tiles.

share|improve this question
16x16 is squared.. not isometric. –  Ivo Wetzel Jul 29 '11 at 17:07
The answer I gave here might help you, though it uses 64x32 tiles: gamedev.stackexchange.com/questions/12362/… –  thedaian Jul 29 '11 at 17:07
@thedaian I'd even say that it's a duplicate of that question. –  bummzack Jul 29 '11 at 17:51
gamedev.stackexchange.com/questions/14274 there are some beautiful illustrations :D –  FxIII Jul 30 '11 at 10:32

2 Answers 2

Check out the code examples at Andres Pagella's github repo. It's the example code that goes along with his book on isometric social games in HTML5. The book explains the math behind the transformation, or you could try and puzzle it out from one his examples, like this one.

share|improve this answer

It is probably going to depend on how you define your world grid, but the tutorials posted earlier are good. I wrote an html5 game engine and open sourced it here: https://github.com/j03m/trafficcone

Docs are still a little rough, but there are some usable/runnable examples. The Isometric game world model shows some of the code needed to do those translations.

Check out this class, it contains a bunch of helper functions designed to hide some of the complexity - but its a bit coupled to how we do things (tiles + cells):


 getWorldCellFromScreenCoord: function (screenX, screenY) {
        var pos = this.getCell(screenX, screenY);
        pos.x = pos.x + this.cameraX;
        pos.y = pos.y + this.cameraY;
        return pos;
    getCell: function (screenX, screenY) {

        var screenLocationX = screenX - this.originX;
        var screenLocationY = this.originY - screenY;

        var ym = (2 * screenLocationY - screenLocationX) / 2;

        var xm = screenLocationX + ym;
        var tw = this.cellWidth;
        var th = this.cellHeight;

        if (xm > 0) {
            xm = xm + tw / 2
        else {
            xm = xm - tw / 2;

        if (ym > 0) {
            ym = ym + th / 2
        else {
            ym = ym - th / 2

        var ty = this.rightFloor(ym / th);
        var tx = this.rightFloor(xm / tw);

        return { "x": -tx, "y": -ty };

But this is again heavily tied to how you decide to do your coordinate system, the direction of your x/y/z axis (0->max or max->0) and if you use cells.

share|improve this answer
You should paste question-specific code here instead of just putting a link to your project. –  Tetrad Jan 20 '12 at 20:13
Understood - revised. –  j03m Jan 20 '12 at 20:22

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.