Mixing HTML5 Video and Canvas - HTML5 Canvas - page 489

Canvas Video Transformations: Rotation

Showingastaticvideoonthescreenisonething,buttransformingitonthescreenusingalpha
transparency and rotations is quite another. These types of transformations can be easily ap-
plied to video on the canvas in much the same way as you would apply them to an image or a
drawing object.
In this example, we will create a video that rotates clockwise. To achieve this effect, we first
create a variable, rotation , which we will use to hold the current values of the rotation prop-
ertythatwewillapplytothevideo.Wecreatethisvariableoutsideofthe drawScreen() func-
tion, inside canvasApp() :

var var rotation = 0 ;

The drawScreen() function iswhere all thereal action takes place forthis example. First, we
need to save the current canvas context so that we can restore it after we perform the trans-
formation. We covered this in depth in Chapter 2 , but here's a quick refresher. Transforma-
tionsonthecanvasareglobalinnature,whichmeanstheyaffect everything .Because thecan-
vas works in immediate mode, there is no stack of objects to manipulate. Instead, we need to
save the canvas context before the transformation, apply the transformation, and then restore
the saved context afterward.

First, we save it:

context . save ();

Next we reset the context transformation to the identity, which clears anything that was set
previously:

context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 );

Then we need to set up some variables that will be used for the rotation calculation. The x
and y variables set the upper-left location of the video on the canvas. The videoWidth and
videoHeight variables will be used to help rotate the video from the center:

var var x = 100 ;

var var y = 100 ;

var var videoWidth = 320 ;

var

var videoHeight = 240 ;

Now it is time to use the rotation variable, which represents the angle that we rotated the
video on the canvas. It starts at 0 , and we will increase it every time drawScreen() is called.
However, the context.rotate() method requires an angle to be converted to radians when