Math, Physics, and Animation - HTML5 Canvas - page 440

context . strokeStyle = '#000000' ;
context . fillStyle = '#EEEEEE' ;
context . fillRect ( 0 , 0 , theCanvas . width , theCanvas . height );
//Box
context . fillStyle = '#000000' ;
context . strokeRect ( 1 , 1 , theCanvas . width - 2 , theCanvas . height - 2 );
for for ( i = 0 ; i < boxes . length ; i ++ ) {

var var position = boxes [ i ]. GetPosition ();

var

var fixtureList = boxes [ i ]. GetFixtureList ();
var

var shape = fixtureList . GetShape ();
var

var userData = boxes [ i ]. GetUserData ();
context . save ();
context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 );
context . translate ( position . x * scaleFactor , position . y *
scaleFactor );
context . rotate ( boxes [ i ]. GetAngle ());
context . fillRect ( 0 - ( userData . width * scaleFactor / 2 ) ,
0 - ( userData . height * scaleFactor / 2 ), userData . width * scaleFactor ,
userData . height
* scaleFactor );
context . restore ();

}

for for ( i = 0 ; i < balls . length ; i ++ ) {

var

var position = balls [ i ]. GetPosition ();
var var fixtureList = balls [ i ]. GetFixtureList ();

var var shape = fixtureList . GetShape ();

context . fillStyle = "#FF0000" ;
context . beginPath ();
context . arc ( position . x * scaleFactor , position . y * scaleFactor ,
shape . GetRadius ()
* scaleFactor , 0 , Math . PI * 2 , true

true );

context . closePath ();
context . fill ();

}

}

function function createBall ( event ) {

var var x ;

var

var y ;
iif ( event . pageX || event . pageY ) {
x = event . pageX ;
y = event . pageY ;

}
else

else {