Can you declare <canvas> methods within a template in javascript?
- by Binarytales
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.
