Mixing HTML5 Video and Canvas - HTML5 Canvas - page 487

function function videoLoaded () {

canvasApp ();

}

function function canvasApp () {

iif ( ! canvasSupport ()) {
return

return ;

}

function function drawScreen () {

//Background
context . fillStyle = '#ffffaa' ;
context . fillRect ( 0 , 0 , theCanvas . width , theCanvas . height );
//Box
context . strokeStyle = '#000000' ;
context . strokeRect ( 5 , 5 , theCanvas . width - 10 , theCanvas . height - 10 );
//video
context . drawImage ( videoElement , 85 , 30 );
// Text
context . fillStyle = "#000000" ;
context . font = "10px sans" ;
context . fillText ( "Duration:" + videoElement . duration , 10 , 280 );
context . fillText ( "Current time:" + videoElement . currentTime , 260 , 280 );
context . fillText ( "Loop: " + videoElement . loop , 10 , 290 );
context . fillText ( "Autoplay: " + videoElement . autoplay , 80 , 290 );
context . fillText ( "Muted: " + videoElement . muted , 160 , 290 );
context . fillText ( "Controls: " + videoElement . controls , 240 , 290 );
context . fillText ( "Volume: " + videoElement . volume , 320 , 290 );

//Display Message
for

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

var var tempMessage = messages [ i ];

iif ( videoElement . currentTime > tempMessage . time ) {
context . font = "bold 14px sans" ;
context . fillStyle = "#FFFF00" ;
context . fillText ( tempMessage . message , tempMessage . x , tempMessage . y );

}

}

}

var var messages = new new Array ();

messages [ 0 ] = { time : 0 , message : "" , x : 0 , y : 0 };