Mixing HTML5 Video and Canvas - HTML5 Canvas - page 521

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 );
//Draw Buttons
//Play
iif ( ! videoElement . paused ) {
context . drawImage ( buttonSheet , 0 , 32 , bW , bH , playX , playY , bW , bH ); //Play Down

} else else {

context . drawImage ( buttonSheet , 0 , 0 , bW , bH , playX , playY , bW , bH ); //Play up

}

iif ( videoElement . paused ) {
context . drawImage ( buttonSheet ,
32 , 32 , bW , bH , pauseX , pauseY , bW , bH ); // Pause down

} else else {

context . drawImage ( buttonSheet , 32 , 0 , bW , bH , pauseX , pauseY , bW , bH ); // Pause up

}

context . drawImage ( buttonSheet , 64 , 0 , bW , bH , stopX , stopY , bW , bH ); // Stop up
timeWaited ++ ;

}

function function eventMouseUp ( event ) {

iif ( timeWaited >= buttonWait ) {
timeWaited = 0 ;
var

var mouseX ;
var var mouseY ;

var var x ;

var var y ;

iif ( event . pageX || event . pageY ) {