Im struggling to find an answer for my question on google, so thought id post.

Im building a top-down tile-based rpg game using html5, javascript and jquery only.

I have set up images in an array. I have set up my map in an array and just looping through it to show the tiles on screen.

I want a 750px x 600px section of a large map to show on the canvas and when the player moves to one of the 4 boundaries the map will update and show the next part of the map or if no map is available stay as it is.

How would i implement this?? 

If you dont understand what im asking ill try to explain better :p but heres my code:

```
$(document).ready(function(){

var canvas = $("#TBG");
var context = canvas.get(0).getContext("2d");

var canvasWidth = canvas.width();
var canvasHeight = canvas.height();

//Player Controls -------------------------------------------------------------------------
$(window).keydown(function(e){
   var keyCode = e.keyCode;
    if (keyCode == arrowRight){
        Player.moveRight = true;
    }
    else if (keyCode == arrowLeft){
        Player.moveLeft = true;
    }
    else if (keyCode == arrowUp){
        Player.moveUp = true;
    }
    else if (keyCode == arrowDown) {
        Player.moveDown = true;
    }
});
$(window).keyup(function(e){
    var keyCode = e.keyCode;
    if (keyCode == arrowRight){
        Player.moveRight = false;
    }
    else if (keyCode == arrowLeft){
        Player.moveLeft = false;
    }
    else if (keyCode == arrowUp){
        Player.moveUp = false;
    }
    else if (keyCode == arrowDown) {
        Player.moveDown = false;
    }
});

function player() {

    this.x = 100;
    this.y = 100;
    this.vX = 0;
    this.vY = 0;

    var moveRight = false;
    var moveLeft = false;
    var moveUp = false;
    var moveDown = false;
}

var Player = new player();

var arrowLeft = 37;
var arrowUp = 38;
var arrowRight = 39;
var arrowDown = 40;

//End Player controls ------------------------------------------------------------------------------

//Map initialisation -------------------------------------------------------------------------------------

var images = new Array(3);

images[0] = new Image();
images[0].src = "images/player.png";

images[1] = new Image();
images[1].src = "images/wall.png";

images[2] = new Image();
images[2].src = "images/grass.png";

images[3] = new Image();
images[3].src = "images/floor.png";

var tileMap = [
    [3,1,3,3,3,3,3,3,3,3],
    [3,1,1,2,2,2,2,2,2,3],
    [3,1,1,1,2,2,2,2,2,3],
    [3,2,1,1,1,2,2,2,2,3],
    [3,2,2,1,1,1,2,2,2,3],
    [3,2,2,2,1,1,1,1,1,3],
    [3,2,2,2,2,1,1,1,1,3],
    [3,2,2,2,2,1,1,1,1,3],
    [3,2,2,2,2,1,1,1,1,3],
    [3,3,3,3,3,3,3,3,3,3]
];

//Animate Loop -------------------------------------------------------------------------------------------
function animate () {

    context.clearRect(0,0,canvasWidth,canvasHeight);

    Player.vX = 0;
    Player.vY = 0;

    //Player Animation
    if (Player.moveRight) {
        Player.vX =2;
    };
    if (Player.moveUp) {
        Player.vY = -2;
    };
    if (Player.moveDown) {
        Player.vY = 2;
    };
    if (Player.moveLeft) {
        Player.vX = -2;
    };

    Player.x += Player.vX;
    Player.y += Player.vY;

    if (Player.x < 0){
        Player.x = 0;
        Player.vX *= -2;
    }
    else if (Player.x + 64 > canvasWidth) {
        Player.x = canvasWidth - 64;
        Player.vX *= -2;
    };
    if (Player.y < 0){
        Player.y = 0;
        Player.vY *= -2;
    }
    else if (Player.y + 64 > canvasHeight) {
        Player.y = canvasWidth - 64;
        Player.vY *= -2;
    };

    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++){

            var tileId = tileMap[i][j];
            var tileWidth = 32;
            var tileHeight = 32;

            context.drawImage(images[tileId],i * tileWidth, j * tileHeight);
        }

    }
    context.drawImage(images[0], Player.x, Player.y);

    setTimeout(animate, 0);
}
// End Loop ------------------------------------------------------------------------------------------------

animate();

```

});

Im not great with Javascript but learning and know a comfortable amount about programming.

thanks in advance
Tom