Ok here is a more detailed version of my question.

What i want to do: i simply want the have a 2d array to represent my game map. i want a player sprite and i want that sprite to be able to move around my map freely using the keyboard and also have collisions with certain tiles of my map array. i want to use very large maps so i need a viewport.

What i have:

I have a loop to load the tile images into an array:

/Loop to load tile images into an array
var mapTiles = [];

for (x = 0; x <= 256; x++) {
    var imageObj = new Image(); // new instance for each image
    imageObj.src = "images/prototype/"+x+".jpg";
    mapTiles.push(imageObj);
}

I have a 2d array for my game map:

    //Array to hold map data
var board =   [

    [1,2,3,4,3,4,3,4,5,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [17,18,19,20,19,20,19,20,21,22,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [33,34,35,36,35,36,35,36,37,38,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [49,50,51,52,51,52,51,52,53,54,1,1,1,1,1,1,1,1,1,1,1,1,1,197,198,199,1,1,1,1],
    [65,66,67,68,146,147,67,68,69,70,1,1,1,1,1,1,1,1,216,217,1,1,1,213,214,215,1,1,1,1],
    [81,82,83,161,162,163,164,84,85,86,1,1,1,1,1,1,1,1,232,233,1,1,1,229,230,231,1,1,1,1],
    [97,98,99,177,178,179,180,100,101,102,1,1,1,1,59,1,1,1,248,249,1,1,1,245,246,247,1,1,1,1],
    [1,1,238,1,1,1,1,239,240,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [216,217,254,1,1,1,1,255,256,1,204,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [232,233,1,1,1,117,118,1,1,1,220,1,1,119,120,1,1,1,1,1,1,1,1,1,1,1,119,120,1,1],
    [248,249,1,1,1,133,134,1,1,1,1,1,1,135,136,1,1,1,1,1,1,59,1,1,1,1,135,136,1,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,216,217,1,1,1,1,1,1,60,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,232,233,1,1,1,1,1,1,1,1,1,1,1,1,1,1,204,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,248,249,1,1,1,1,1,1,1,1,1,1,1,1,1,1,220,1,1,1,1,1,1,216,217,1,1,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,149,150,151,1,1,1,1,1,1,1,1,1,1,232,233,1,1,1],
    [12,12,12,12,12,12,12,13,1,1,1,1,165,166,167,1,1,1,1,1,1,119,120,1,1,248,249,1,1,1],
    [28,28,28,28,28,28,28,29,1,1,1,1,181,182,183,1,1,1,1,1,1,135,136,1,1,1,1,1,1,1],
    [44,44,44,44,44,15,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,59,1,1,197,198,199,1,1,1,1,119,120,1],
    [1,1,1,1,1,27,28,29,1,1,216,217,1,1,1,1,1,1,1,1,213,214,215,1,1,1,1,135,136,1],
    [1,1,1,1,1,27,28,29,1,1,232,233,1,1,1,1,1,1,1,1,229,230,231,1,1,1,1,1,1,1],
    [1,1,1,1,1,27,28,29,1,1,248,249,1,1,1,1,1,1,1,1,245,246,247,1,1,1,1,1,1,1],
    [1,1,1,197,198,199,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,213,214,215,28,29,1,1,1,1,1,60,1,1,1,1,204,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,229,230,231,28,29,1,1,1,1,1,1,1,1,1,1,220,1,1,1,1,119,120,1,1,1,1,1],
    [1,1,1,245,246,247,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,135,136,1,1,60,1,1],
    [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

I have my loop to place the correct tile sin the correct positions:

//Loop to place tiles onto screen in correct position
        for (x = 0; x <= viewWidth; x++){
            for (y = 0; y <= viewHeight; y++){
                var width = 32;
                var height = 32;
            context.drawImage(mapTiles[board[y+viewY][x+viewX]],x*width, y*height);
        }
    }

I Have my player object :

//Place player object
    context.drawImage(playerImg, (playerX-viewX)*32,(playerY-viewY)*32, 32, 32);

I have my viewport setup:

//Set viewport pos
viewX = playerX - Math.floor(0.5 * viewWidth);
    if (viewX < 0) viewX = 0;
    if (viewX+viewWidth > worldWidth) viewX = worldWidth - viewWidth;


    viewY = playerY - Math.floor(0.5 * viewHeight);
    if (viewY < 0) viewY = 0;
    if (viewY+viewHeight > worldHeight) viewY = worldHeight - viewHeight;

I have my player movement:

canvas.addEventListener('keydown', function(e) {
    console.log(e);
    var key = null;
    switch (e.which) {
        case 37:
            // Left
            if (playerY > 0) playerY--;
            break;
        case 38:
            // Up
            if (playerX > 0) playerX--;
            break;
        case 39:
            // Right
            if (playerY < worldWidth) playerY++;
            break;
        case 40:
            // Down
            if (playerX < worldHeight) playerX++;
            break;
    }

My Problem:

I have my map loading an it looks fine, but my player position thinks it's on a different tile to what it actually is.

So for instance, i know that if my player moves left 1 tile, the value of that tile should be 2, but if i print out the value it should be moving to (2), it comes up with a different value.

How ive tried to solve the problem:

I have tried swap X and Y values for the initialization of my player, for when my map prints.

If i swap the x and y values in this part of my code:

context.drawImage(mapTiles[board[y+viewY][x+viewX]],x*width, y*height);

The map doesnt get draw correctly at all and tiles are placed all in random positions or orientations

IF i sway the x and y values for my player in this line :

context.drawImage(playerImg, (playerX-viewX)*32,(playerY-viewY)*32, 32, 32);

The players movements are inversed, so up and down keys move my player left and right viceversa.

My question:

Where am i going wrong in my code, and how do i solve it so i have my map looking like it should and my player moving as it should as well as my player returning the correct tileID it is standing on or moving too.

Thanks Again

ALSO

Here is a link to my whole code:

prototype