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

iif ( ball . t > 1 ) {
ball . t = 1 ;

} //draw the points

context . font = "10px sans" ;
context . fillStyle = "#FF0000" ;
context . beginPath ();
context . arc ( p0 . x , p0 . y , 8 , 0 , Math . PI * 2 , true true );

context . closePath ();
context . fill ();
context . fillStyle = "#FFFFFF" ;
context . fillText ( "0" , p0 . x - 2 , p0 . y + 2 );

context . fillStyle = "#FF0000" ;
context . beginPath ();
context . arc ( p1 . x , p1 . y , 8 , 0 , Math . PI * 2 , true

true );

context . closePath ();
context . fill ();
context . fillStyle = "#FFFFFF" ;
context . fillText ( "1" , p1 . x - 2 , p1 . y + 2 );

context . fillStyle = "#FF0000" ;
context . beginPath ();
context . arc ( p2 . x , p2 . y , 8 , 0 , Math . PI * 2 , true true );

context . closePath ();
context . fill ();
context . fillStyle = "#FFFFFF" ;
context . fillText ( "2" , p2 . x - 2 , p2 . y + 2 );

context . fillStyle = "#FF0000" ;
context . beginPath ();
context . arc ( p3 . x , p3 . y , 8 , 0 , Math . PI * 2 , true

true );

context . closePath ();
context . fill ();
context . fillStyle = "#FFFFFF" ;
context . fillText ( "3" , p3 . x - 2 , p3 . y + 2 );

//Draw points to illustrate path

points . push ({ x : xt , y : yt });

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

context . drawImage ( pointImage , points [ i ]. x , points [ i ]. y , 1 , 1 );

}

context . closePath ();