CodingForums.com - Html5 Canvas Game Drawing

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Html5 Canvas Game Drawing (http://www.codingforums.com/showthread.php?t=192004)

Html5 Canvas Game Drawing

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:
http://img233.imageshack.us/img233/6132/problemf.png
What is is supposed to look like and is in Firefox:
http://img215.imageshack.us/img215/7...oblemright.png

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.

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>

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.