Canvas windowing system

app.js

/**
 *Manager class for handling both the game map And the viewable window area.
 */
function GameMap(windowId, mapId,  h, w){
    
    //The game map itself
    this.ctx = document.getElementById(windowId).getContext("2d");
    //The viewable window area
    this.window = document.getElementById(mapId).getContext("2d");
    
    //*MX is short hand for Maximum X or Y value
    //Max X & Y for the view window
    this.wMX = this.window.canvas.height;
    this.wMY = this.window.canvas.width;
    
    //canvas max dimensions
    this.cMX = this.ctx.canvas.height
    this.cMY = this.ctx.canvas.width
    
    //map max dimensiosn, 10x10 grid
    
    //Game map maximum dimensions
    this.mMX = h || 50;
    this.mMY = w || 50;
    
    //Ratio difference between the map and the window
    this.ratioX = this.cMX / this.wMX;
    this.ratioY = this.cMY / this.wMY;
    
    //roomSize
    this.rMX = 5;
    this.rMY = 5;
    //The game map, a 3d array of anonymous objects
    this.grid = new Array();
    
    this.player = {x:4, y:4};
    this.generateMap();
    this.render();
}

GameMap.prototype.drawRoom = function(x, y, h, w, style){
    this.ctx.save();
    this.ctx.fillStyle = style || "#0000FF"; 
    this.ctx.fillRect(x, y, h * .7 , w * .7 );    
    this.ctx.restore();
}

GameMap.prototype.generateMap = function(){
    /**
     *Generates Map X * Y anonymous objects that represent rooms, adding a unique Id to each room
     *
     */
    var roomId = 0;
    for(var x = 0; x < this.mMX; x++){
        for(var y = 0; y < this.mMY; y++){
            if(typeof this.grid[x] == "undefined"){
                this.grid[x] = new Array();
            }
            this.grid[x].push({id:roomId, "x":x, "y":y, text:"Empty", allowed:true});
            roomId++
        }
    }
}

GameMap.prototype.render = function(){
    this.ctx.fillRect(0,0, this.cMX, this.cMY);
    var RMX = this.mMX / this.rMX;
    var RMY = this.mMX / this.rMY;
    for(var x = 0; x < this.grid.length; x++){
        for(var y = 0; y < this.grid[x].length; y++){
            var tX = RMX * x + 50;
            var tY = RMY * y + 50;
            var playerPresent = (this.player.x == x) && (this.player.y == y)
            
            if(playerPresent){
                style = "#FF0000";
            }
            else if(x % 2 == 0){
                if(x < (this.grid.length / 2) ){
                    style = "#44FF44";    
                }
                else{
                    style = "#44FF44";    
                }
                
            }
            else if(y % 2 == 0){
                if( y < (this.grid[x].length / 2 ) ){
                    style = "#0000FF";    
                }
                else{
                    style = "#4444FF";
                }
                
            }
            else{
                style = "#000000";
            }
            
            this.drawRoom(tX-1, tY+-1, 14, 14 , style );
        }
    }
    
    
    var oX = this.player.x * (this.mMX / this.rMX);
    var oY = this.player.y * (this.mMX / this.rMY);
    
    var halfX = ( this.wMX / 2 );
    var halfY = ( this.wMY / 2 );
    
    var startX = Math.max(0, oX - halfX);
    var startY = Math.max(0, oY - halfY);
    
    var endX = Math.max(startX + this.wMX);
    var endY = Math.max(startY + this.wMY);
    
    var buffer = this.ctx.getImageData(startX, startY, endX, endY);
    this.window.putImageData(buffer, 0, 0);
    
}

GameMap.prototype.moveNorth =
    function(){
        if(this.player.y > 0){
            this.player.y -= 1;
        }
        this.render();
    }

GameMap.prototype.moveSouth =
    function(){
        if(this.player.y < (this.mMY - 1)){
            this.player.y += 1;
        }
        this.render();
    }    

GameMap.prototype.moveWest =
    function(){
        if(this.player.x > 0){
            this.player.x -= 1;
        }
        this.render();
    }
    
GameMap.prototype.moveEast =
    function(){
        if(this.player.x < (this.mMX - 1) ){
            this.player.x += 1;
        }
        this.render();        
    }    

index.html

/**
 *Manager class for handling both the game map And the viewable window area.
 */
function GameMap(windowId, mapId,  h, w){
    
    //The game map itself
    this.ctx = document.getElementById(windowId).getContext("2d");
    //The viewable window area
    this.window = document.getElementById(mapId).getContext("2d");
    
    //*MX is short hand for Maximum X or Y value
    //Max X & Y for the view window
    this.wMX = this.window.canvas.height;
    this.wMY = this.window.canvas.width;
    
    //canvas max dimensions
    this.cMX = this.ctx.canvas.height
    this.cMY = this.ctx.canvas.width
    
    //map max dimensiosn, 10x10 grid
    
    //Game map maximum dimensions
    this.mMX = h || 50;
    this.mMY = w || 50;
    
    //Ratio difference between the map and the window
    this.ratioX = this.cMX / this.wMX;
    this.ratioY = this.cMY / this.wMY;
    
    //roomSize
    this.rMX = 5;
    this.rMY = 5;
    //The game map, a 3d array of anonymous objects
    this.grid = new Array();
    
    this.player = {x:4, y:4};
    this.generateMap();
    this.render();
}

GameMap.prototype.drawRoom = function(x, y, h, w, style){
    this.ctx.save();
    this.ctx.fillStyle = style || "#0000FF"; 
    this.ctx.fillRect(x, y, h * .7 , w * .7 );    
    this.ctx.restore();
}

GameMap.prototype.generateMap = function(){
    /**
     *Generates Map X * Y anonymous objects that represent rooms, adding a unique Id to each room
     *
     */
    var roomId = 0;
    for(var x = 0; x < this.mMX; x++){
        for(var y = 0; y < this.mMY; y++){
            if(typeof this.grid[x] == "undefined"){
                this.grid[x] = new Array();
            }
            this.grid[x].push({id:roomId, "x":x, "y":y, text:"Empty", allowed:true});
            roomId++
        }
    }
}

GameMap.prototype.render = function(){
    this.ctx.fillRect(0,0, this.cMX, this.cMY);
    var RMX = this.mMX / this.rMX;
    var RMY = this.mMX / this.rMY;
    for(var x = 0; x < this.grid.length; x++){
        for(var y = 0; y < this.grid[x].length; y++){
            var tX = RMX * x + 50;
            var tY = RMY * y + 50;
            var playerPresent = (this.player.x == x) && (this.player.y == y)
            
            if(playerPresent){
                style = "#FF0000";
            }
            else if(x % 2 == 0){
                if(x < (this.grid.length / 2) ){
                    style = "#44FF44";    
                }
                else{
                    style = "#44FF44";    
                }
                
            }
            else if(y % 2 == 0){
                if( y < (this.grid[x].length / 2 ) ){
                    style = "#0000FF";    
                }
                else{
                    style = "#4444FF";
                }
                
            }
            else{
                style = "#000000";
            }
            
            this.drawRoom(tX-1, tY+-1, 14, 14 , style );
        }
    }
    
    
    var oX = this.player.x * (this.mMX / this.rMX);
    var oY = this.player.y * (this.mMX / this.rMY);
    
    var halfX = ( this.wMX / 2 );
    var halfY = ( this.wMY / 2 );
    
    var startX = Math.max(0, oX - halfX);
    var startY = Math.max(0, oY - halfY);
    
    var endX = Math.max(startX + this.wMX);
    var endY = Math.max(startY + this.wMY);
    
    var buffer = this.ctx.getImageData(startX, startY, endX, endY);
    this.window.putImageData(buffer, 0, 0);
    
}

GameMap.prototype.moveNorth =
    function(){
        if(this.player.y > 0){
            this.player.y -= 1;
        }
        this.render();
    }

GameMap.prototype.moveSouth =
    function(){
        if(this.player.y < (this.mMY - 1)){
            this.player.y += 1;
        }
        this.render();
    }    

GameMap.prototype.moveWest =
    function(){
        if(this.player.x > 0){
            this.player.x -= 1;
        }
        this.render();
    }
    
GameMap.prototype.moveEast =
    function(){
        if(this.player.x < (this.mMX - 1) ){
            this.player.x += 1;
        }
        this.render();        
    }