Not entirely sure I posed the question in the best way but here goes...

I have been playing around with the HTML5 canvas API and have got as far as drawing a shape in the canvas and getting it to move around with the arrow keys.

I then tried to move my various variables and functions to a template so I could spawn multiple shapes (that would eventually be controlled by different keys).

This is what I have:

function player(x, y, z, colour, speed){
    this.lx = x;
    this.ly = y;
    this.speed = 10;
    this.playerSize = z;
    this.colour = colour;
}

playerOne = new player(100, 100, 10, "#F0F");

function persona(z, colour){ 
    zone.fillStyle = colour;
    offset = 0 - (z / 2);
    zone.fillRect(offset, offset, z, z);
}

function move(x, y){
    playerOne.lx = playerOne.lx + x;
    playerOne.ly = playerOne.ly + y;

    zone.clearRect(0, 0, 500, 500);

    zone.save();
        zone.translate(playerOne.lx, playerOne.ly);
        persona(playerOne.playerSize, playerOne.colour);
    zone.restore();
}

window.onkeydown = function() {

    var direction = this.event.keyCode;

    var s = playerOne.speed;

    // Arrow Keys
    if( direction == 38 && playerOne.ly >= 10){ // Up
        move(0,-s);
    }

    if( direction == 40 && playerOne.ly <= 490){    // Down
        move(0,s);
    }

    if( direction == 37 && playerOne.lx >= 10){ // Left
        move(-s,0);
    }

    if( direction == 39 && playerOne.lx <= 490){    // Right
        move(s,0);
    }
};

window.onload = function() {
    zone = document.getElementById('canvas').getContext('2d');
    zone.save();
        zone.translate(playerOne.lx, playerOne.ly);
        persona(playerOne.playerSize, playerOne.colour);
    zone.restore();
};

So what I tried to do was move the persona function into the player template like this:

function player(x, y, z, colour, speed){
    this.lx = x;
    this.ly = y;
    this.speed = 10;

    function persona(){ 
        zone.fillStyle = colour;
        var offset = 0 - (z / 2);
        zone.fillRect(offset, offset, z, z);
    }

}

And then where before it said

persona(playerOne.playerSize, playerOne.colour);

it now just says

playerOne.persona();

But this is just totally flaking out and not working and I can't figure out why.

I'm probably going about it all the wrong way and I think the problem is that I'm trying to manipulate the canvas.context (call zone in my script) from within a object/template.

Perhaps its nothing to do with that at all and I an just not declaring my persona functions properly in the context of the template.

Documentation for the canvas API is very thin on the ground and any hint in the right direction will be very much appreciated.