Html5 Canvas Game Drawing

JuliaF · 03-21-2010, 02:46 AM

I am trying to create an Asteroids type game using JavaScript along with html5's canvas element for drawing. I have searched around and have looked at examples but I can't figure out what is wrong with my rendering that I do in the game loop that is run every frame. The problem appears to be only that the canvas is not cleared at the beginning of each frame but I feel there might be something wrong also. The code used and shown below only works in Firefox but not Google Chrome or Safari.

Here is a picture of what it renders in Chrome:

What is is supposed to look like and is in Firefox:

Here is my set up for drawing on the canvas:

Code:

var canvas = null;
var c2d = null;
//...
window.onload = init;
function init() {
	canvas = document.getElementById('canvas');
	c2d = canvas.getContext('2d');
	setInterval( step, 1000/FPS );
	//...
	//c2d.setTransform(1,0,0,1,0,0); // reset to identity <--Do I need this?
}

Below is the game loop function. Am I clearing the canvas correctly because it does not clear the screen? Also am I using the save and restore functions correctly? Each asteroid and player drawn is at a different of position and rotation so am I doing it correct to draw them?

Code:

function step() {
	//...
	canvas.width = canvas.width; //clear canvas PROBLEM

        //Things I have tried:
	//canvas.height = canvas.height; //clear canvas 
	//c2d.clearRect(0, 0, canvas.width, canvas.height);

	for (u=0;u<asteroids.length;u++) {
		c2d.save();
		asteroids[u].draw();
		c2d.restore();
	}
	c2d.save();
	player.draw();
	c2d.restore();
	
	c2d.strokeStyle = "#000000";
	c2d.stroke();
}

Below is the Asteroid and Player drawing functions. The Asteroid is a polygon and the Player is a triangle. Both rotate and are draw correctly but should I be passing a reference to the drawing reference?

Code:

function Asteroid_draw() {
	c2d.translate( this.x, this.y );
	c2d.rotate(this.angle);
	for (i=0;i<this.points_x.length-1;i++) {
		c2d.moveTo(this.points_x[i],this.points_y[i]);
		c2d.lineTo(this.points_x[i+1],this.points_y[i+1]);
	}
	c2d.moveTo(this.points_x[0],this.points_y[0]);
	c2d.lineTo(this.points_x[this.points_x.length-1],this.points_y[this.points_x.length-1]);
}
function Player_draw() {
	c2d.translate( this.x, this.y );
	c2d.rotate(this.angle);
	//Points {0,-12}{7,5}{-7,5}
	c2d.moveTo(0,-12);
	c2d.lineTo(7,5);
	c2d.moveTo(7,5);
	c2d.lineTo(-7,5);
	c2d.moveTo(-7,5);
	c2d.lineTo(0,-12);
}

Any help is appreciated.

TinyScript · 03-21-2010, 07:27 AM

I kinda winged it. You could post all your code for real solution.
Sorry I renamed your c2d variable. I really like calling it ctx short for context

Code:

<script>
<script>
var canvas = null;
var c2d = null;
//...
window.onload = init;
function init() {
asteroids=[{x:470,y:290,angle:1.71,points_x:[-30,-10,0,20,40,20,-10],points_y:[ 0,-20,-50,-30,0,20,20]},{x:270,y:290,angle:1.71,points_x:[-30,-10,0,20,40,20,-10],points_y:[ 0,-20,-50,-30,0,20,20]}]
player={x:50,y:50,angle:1.71,inertia:0,inertiaAngle:0}
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	setInterval( step, 60 );
}

function step() {
	for (i in asteroids){asteroids[i].angle+= i%2==0?.05:-.05}
ctx.fillStyle="rgba(0,0,0,.5)"
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	for (u=0;u<asteroids.length;u++) {
		ctx.save();
ctx.beginPath()
		Asteroid_draw(asteroids[u]);
ctx.closePath()
ctx.strokeStyle = "#00ff00";
	ctx.stroke();
		ctx.restore();
	}
	ctx.save();
ctx.beginPath()
	Player_draw(player);
ctx.closePath()

	ctx.restore();
	
	ctx.strokeStyle = "#00ff00";
	ctx.stroke();

player.x<0?player.x=canvas.width:player.x%=canvas.width
player.y<0?player.y=canvas.height:player.y%=canvas.height

if(player.inertia>0)player.inertia-=.01

player.x+=Math.sin(player.inertiaAngle)*player.inertia;player.y+=-Math.cos(player.inertiaAngle)*player.inertia
}
function Asteroid_draw(obj) {

	ctx.translate( obj.x, obj.y)
	ctx.rotate(obj.angle);
ctx.moveTo(obj.points_x[0],obj.points_y[0]);
	for (i=0;i<obj.points_x.length-1;i++) {
		
		ctx.lineTo(obj.points_x[i],obj.points_y[i]);
	}
ctx.lineTo(obj.points_x[0],obj.points_y[0]);

	//ctx.moveTo(obj.points_x[0],obj.points_y[0]);
	//ctx.lineTo(obj.points_x[obj.points_x.length-1],obj.points_y[obj.points_x.length-1]);
}
function Player_draw(obj) {
	ctx.translate( obj.x, obj.y );
	ctx.rotate(obj.angle);
	//Points {0,-12}{7,5}{-7,5}
	ctx.moveTo(0,-12);
	ctx.lineTo(7,5);
	ctx.moveTo(7,5);
	ctx.lineTo(-7,5);
	ctx.moveTo(-7,5);
	ctx.lineTo(0,-12);
}
document.onkeydown=function(event){keyDown(event)};

function keyDown(event) { 

		if (event.keyCode == 37) {player.angle-=.1}/*left*/
	else 	if (event.keyCode == 39) {player.angle+=.1}/*right*/
	else 	if (event.keyCode == 38) {player.inertia+=.1;player.inertiaAngle=(player.inertiaAngle+player.angle)/2}/* up*/
	else 	if (event.keyCode == 40) {player={x:50,y:50,angle:1.71,inertia:0,inertiaAngle:0}}/*down*/

}


</script>
<canvas id="canvas" width="600" height="600"></canvas>
<canvas id="canvas" width="600" height="600"></canvas>

JuliaF · 03-21-2010, 05:04 PM

It worked! Thank you TinyScript so much!

I guess the clearing wasn't causing the problem because any one I choose now works.

My code now is:

Code:

c2d.save();
c2d.beginPath();
/* Drawing functions  */
c2d.closePath();
c2d.strokeStyle = "#000000";
c2d.stroke();
c2d.restore();

The problem must have been caused by the repeated saving and storing of the paths without them being rendered or something.