I have a problem with my map design for my tiles.

I set player position which is meant to be the middle tile that the canvas is looking at.

How ever the calculation to put them in x:y pixel location is completely messed up for me and i don't know how to fix it.

This is what i tried:

 var offset_x = 0; //used for scrolling on x
 var offset_y = 0; //used for scrolling on y
 var prev_mousex = 0; //for movePos function
 var prev_mousey = 0; //for movePos function

function movePos(e){ 

    if (prev_mousex === 0 && prev_mousey === 0) {
        prev_mousex = e.pageX;
        prev_mousey = e.pageY;
    }

    offset_x = offset_x + (e.pageX - prev_mousex);
    offset_y = offset_y + (e.pageY - prev_mousey);
    prev_mousex = e.pageX;
    prev_mousey = e.pageY;
    run = true;

}


player_posx = 5; 
player_posy = 55; 
ct = 19;

    for (i = (player_posx-ct); i < (player_posx+ct); i++){ //horizontal 
    for (j=(player_posy-ct); j < (player_posy+ct); j++){ // vertical

//img[0] is 64by64 but the graphic is 64by32 the rest is alpha space
    var x = (i-j)*(img[0].height/2) + (canvas.width/2)-(img[0].width/2); 
    var y = (i+j)*(img[0].height/4);

    var abposx = x - offset_x;
    var abposy = y - offset_y;

    ctx.drawImage(img[0],abposx,abposy);    
    }
}

Now based on these numbers the first render-able tile is I = 0 & J = 36. As numbers in the negative are not in the array.

But for I=0 and J= 36 the position it calculates is : -1120 : 592

Does any one know how to center it to canvas view properly?