-          Is it possible to create a global audio player that works in every page of my application?

-          Is it possible use Expression Encoder 4 for Audio only Live Smooth Streaming?

I would try to respond to these questions starting from the first.

Is it possible to create a global audio player that works in every page of my application?

I assuming that you are familiar with  Smooth Streaming Media Element on Windows Phone, in the case that you want learn more about how use  it you can read my previous blog post about this.

Smooth Streaming Media Element (SSME) is a UI control. In order to works it is necessary insert this in the visual tree of your page. If you insert this in the visual Tree of a page and after that your application navigates in other pages, SSME stopped. If you would create a global SSME for audio streaming that continue to works in every page of your application, the most simple thing that you can do is put it in the template of the page and take a reference to it in a property on the App object.

In order to understand  how it is possible do this, you can create a simple Windows Phone Visual Studio project . You can start a new Windows Phone 7 project from Visual Studio using the specific template project:

And after that you can add a reference to Microsoft.Web.Media.SmoothStreaming.dll for WP7 (look my previous blog post about this for more info ):

  In order to insert the Smooth Streaming Media Element in the template of the page, you have to create a new template and insert it in the app.xaml as a resource.  To add the SSME to this template you have to add this reference to the app.xaml, in  the <Application  tag:

xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"

 After that, you can add this new control template inside the <Application.Resources> tag in app.xaml:

 <ControlTemplate x:Key="AudioPlayerContentTemplate">

                <Grid x:Name="MediaElementContainer">

                    <!-- The Smooth Streaming media element used to play audio -->                   

<ssme:SmoothStreamingMediaElement  Loaded="OnMediaLoaded" Height="1" Width="1"  />

                    <!-- Added for the normal content -->

                    <Grid x:Name="ClientArea">

                        <ContentPresenter />

                    </Grid>

                </Grid>

            </ControlTemplate>

We use this control template to substitute the default template that the Phone use for the  Root Phone Page. In the App.cs file add the code to inject the template in the method CompleteInitializePhoneApplication :

private void CompleteInitializePhoneApplication(object sender, NavigationEventArgs e)

        {

            // Set the root visual to allow the application to render

            if (RootVisual != RootFrame

               RootVisual = RootFrame;

            // Remove this handler since it is no longer needed

            RootFrame.Navigated -= CompleteInitializePhoneApplication;

             // Add this to inject the smooth streaming media element Control template

             RootFrame.Template = App.Current.Resources["AudioPlayerContentTemplate"]

                           as ControlTemplate;

        }

In App.cs we can also add a property that can permit to access to the SSME loaded in the template and the event to load it from the template that we have declared in the template xaml listed before. We set also the SmoothStreamingPlaybackMode  to PlaybackMode.AudioOnly, in order to ask to SSME to download only audio chunk and ignore video tracks that could be presents in the manifest:  

private static SmoothStreamingMediaElement _globalMediaElement = null;

        public static SmoothStreamingMediaElement GlobalMediaElement

        {

            get { return _globalMediaElement; }

        }

        private void OnMediaLoaded(object sender, RoutedEventArgs e)

        {

            if (_globalAudioElement == null)

            {

                _globalAudioElement = sender as SmoothStreamingMediaElement;

                _globalAudioElement.SmoothStreamingPlaybackMode = PlaybackMode.AudioOnly;

            }

        }

After that, you can access from every page of the page  to App.GlobalMediaElement and use it to set the SmoothStreamingSource and control Play and Stop.

For example you can add this to the LoadedEvent in the mainpage of your application, in order to start the stream:

        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

        {

            if ((App.GlobalAudioElement.CurrentState == SmoothStreamingMediaElementState.Stopped) || (App.GlobalAudioElement.CurrentState == SmoothStreamingMediaElementState.Closed))

            {

                App.GlobalAudioElement.SmoothStreamingSource = new Uri(http://server/live/audiolivestream.isml/Manifest);

            }

        }

Is it possible use Expression Encoder 4 for Audio only Live Smooth Streaming?

Yes,  it is possible use Expression Encoder 4 Pro Sp1 to stream audio only live Smooth Streaming. You can also use others encoders compatible with Smooth Streaming for delivering Live Audio with this type of streaming. The current version of Smooth Streaming  supports the adaptive streaming capability  only for the video tracks. You can insert more audio tracks but these tracks can't  be used for adapt the quality to the avaliable bandwith but only as alternative tracks that the user can select ( for example different languages tracks ). EE4 SP1 doesn't support multi audio track and if you need to insert more track you have to use a different encoder that support this or you can create more streams with separate manifests with EE4.

  The current version of EE4 Pro Sp1 dosen't permit to create a live smooth streaming project without a video track,  but you can insert a black screen video track and ignore it on a client side. In order to do that you have to select in the live project only the audio input and inserting in the manifest also one video track, that stream a black screen with a low bitrate. In the player based on SSME on the Windows Phone, or on in Silverlight for PC if you set the property SmoothStreamingPlaybackMode to PlaybackMode.AudioOnly, before to set the SmoothStreamingSource property, Smooth Streaming Media Element download only the audio track and ignore the video track that you have inserted in the manifest.

 In order to configure EE4 Pro SP1 to deliver this in order to use Audio only live Smooth Streaming with IIS Media Services you need to use a PC with IIS Media Services 4 and EE4 Pro SP1.If you aren't familiar with Live Smooth Streaming, you can find more information about how configure IIS Media Services and Expression Encoder 4Pro SP1 for Live Smooth Streaming in this tutorial .

You can start a new EE4 project and select a Live Broadcasting project:

 Add a Live Source:

Select only the audio device input:

Select from the preset for the project the H264 IIS Smooth Streaming for Windows Phone 7 presets and reduce the video tracks to only one wher you select a low resolution with a low frame rate:

connect the output of EE4 to a publishing point on IIS Media Services and start the encoding ( if you aren't familiar with Live Smooth Streaming,  you can find more information about  how configure IIS Media Services and Expression Encoder 4Pro SP1 for Live Smooth Streaming  in this tutorial ):

Now you can set the url of the publishing point in the SSME player on Windows Phone 7 and pay attention to  set the property SmoothStreamingPlaybackMode to PlaybackMode.AudioOnly, before to set the SmoothStreamingSource property, and you are able to Play the Live Audio only Smooth Streaming.

Enjoy !!!

As I have written in others articles in Italy we have some important customers that use today IIS TM Beta in some relevant video service like RAI Replay TV and Video Mediaset web site.

You can learn more about IIS TM starting from the page dedicated to this new service on IIS Media Sevices Web site.

With this new Beta coming some new interesting features in IIS TM like the new Notifications service and the Monitoring and Management API.

Notifications service can permit to you to send notifications as a POST web requests with job status changes to a remote web application or service. This enables web developers to build a custom Transform Manager job-monitoring system. You can learn more about notifications in IIS TM in this tutorial on IIS Media Web site.

The new Monitoring and Management API can permit to manage Jobs using custom code. You can directly use the same API that the Management Console application uses, in order to create custom code to manage and monitoring Jobs Status and IIS TM configuration. You can send any command to IIS TM from your code and execute operation like stopping or resubmiting a Job. These API are available as WCF endpoints. You have to use a process that runs in the context of a user with administrative privilege to use these endpoints.

Before to start to use IIS TM and this features make sure that you have downloaded the latest IIS TM Beta build (build 1151.5)  from the Microsoft download center in order to have the right build where this API works with the right behavior.

The interfaces of this API are described in the IIS TM SDK and these offering a large numbers of methods useful to manage and monitoring Jobs and IIS TM configurations.

 You can consume these WCF Endpoints in a very simple way using Visual Studio 2010. For example you can build in a very simple way a WPF app that is able to consume these API.

In order to do this you can open Visual Studio using “run as Administrator” in order to have the right permissions to consume management and monitoring API:

 From Visual Studio you have to create a new WPF project:

In the Solution Explorer you can add a Service reference to the management and monitoring API on the PC where you running the IIS TM and Visual Studio:

The addresses of the WCF endpoints are:

net.tcp://localhost:59999/TransformManager/Management/Monitoring

 net.tcp://localhost:59999/TransformManager/Management/Management

 and the metadata URL where is available the WSDL is:

net.tcp://localhost:59999/TransformManager/Management/mex

You can use the metadata URL and insert it in the service reference wizard that creates for you the WCF proxy code to access to the services endpoints:

After the creation of the WCF proxy, you can add a reference to the WCF proxy namespace to your WPF window code, in my case ia called the namespace of the project IISTMTest and the namespace of the proxy ServiceReference1:

using IISTMTest.ServiceReference1;

 and you can use the proxy classes ManagementServiceClient and  MonitoringServiceClient in order to consume the IIS TM services.

For Example , you can add a Button and a ListBox with a DataTemplate  to the WPF Window  in order to show some details from the Jobs:

<Window x:Class="IISTMTest.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="22,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

        <ListBox     Height="100" HorizontalAlignment="Left" Margin="12,73,0,0" Name="listBox1" VerticalAlignment="Top" Width="479" >

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="Auto"/>

                        </Grid.ColumnDefinitions> 

                        <TextBlock Margin="10,0,0,0" Grid.Column="0"  Text="{Binding JobSchedulerId}"/>

                        <TextBlock  Margin="10,0,0,0" Grid.Column="1" Text="{Binding JobSchedulerName}"/>

                        <TextBlock  Margin="10,0,0,0" Grid.Column="2"  Text="{Binding EndTime}"/>

                    </Grid>

                </DataTemplate>

            </ListBox.ItemTemplate> 

        </ListBox>

    </Grid>

</Window>

and in the click event of the button you can write this code:

 private void button1_Click(object sender, RoutedEventArgs e)

        {

            MonitoringServiceClient svc = new MonitoringServiceClient();

            int num=svc.GetJobCountByStatus(JobStatus.Finished);

            JobDetails[]  jobs =svc.GetJobDetails(JobStatus.Finished,JobDetailsField.JobSchedulerId, true, 0, num);

            listBox1.ItemsSource = jobs;  

        }

And in this way you could list all the finished Jobs and show some properties about these in the ListBox.

In the IIS TM SDK you can find all the methods available from  IManagementService and   IMonitoringService that you can call using the WCF Proxy classes created from the WSDL of the IIS TM service using the Visual Studio service reference wizard.

Because the methods from the services require that the process that call the services run in the context of a user with administrative elevated privilege, in order to  run the exe compiled, you have also to add a .manifest file with the configuration that required the administrative privilege for the .exe. For this reason you have to add  a new item to the project  and insert an app.manifest file:

In the manifest file you have to configure the requestedExecutionLevel in order to require administrative privilege:

<?xml version="1.0" encoding="utf-8"?>

<asmv1:assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv1="urn:schemas-microsoft-com:asm.v1" xmlns:asmv2="urn:schemas-microsoft-com:asm.v2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

  <assemblyIdentity version="1.0.0.0" name="MyApplication.app"/>

  <trustInfo xmlns="urn:schemas-microsoft-com:asm.v2">

    <security>

      <requestedPrivileges xmlns="urn:schemas-microsoft-com:asm.v3">

        <!-- UAC Manifest Options

            If you want to change the Windows User Account Control level replace the

            requestedExecutionLevel node with one of the following.

        <requestedExecutionLevel  level="asInvoker" uiAccess="false" />

        <requestedExecutionLevel  level="requireAdministrator" uiAccess="false" />

        <requestedExecutionLevel  level="highestAvailable" uiAccess="false" />

            Specifying requestedExecutionLevel node will disable file and registry virtualization.

            If you want to utilize File and Registry Virtualization for backward

            compatibility then delete the requestedExecutionLevel node.

        -->

        <requestedExecutionLevel level="requireAdministrator" uiAccess="false" />

      </requestedPrivileges>

    </security>

  </trustInfo>

</asmv1:assembly>

 After this you can run directly the .exe file.

Enjoy this new API from IIS TM and start to build great applications for managing videos workflow !!

 Using today HTML5 Video

The new HTML5 video and audio tags from the HTML5 specification offer a new powerful way to deliver multimedia content using directly HTML and JS . How we can start to use this new features in our web sites ? In this session we will analyze how to use them to play media in modern browsers and on mobile devices. Learn the most advanced techniques and best practices, including encoding and distribution, custom skinnable players, full screen workarounds, seeking settings and fallback scenarios for legacy browsers..

download slides

HTML5, CSS3 – Opening A Whole New World

 New web standards like HTML5, CSS3, and ECMAScript, web designers and developers now have a whole new set of tools they can use to build a new class of web applications that are graphically rich and have more immersive experiences than ever before. But do you really know what this new class of HTML5 web applications is capable of? What’s in HTML5 that lets us take our sites to the next level? Let’s find out!

download slides

 The new Internet Explorer: Standards, Performance, Security and the new JavaScript Engine

 Internet Explorer 9 is here and it is a big step forward for Windows’s browser. Main areas of improvements for IE9 are: Standards, Performance and Security. In this session we will see how Internet Explorer 9 allows developers to build new and exciting web sites using open web standards like HTML5, CSS3 and more. Today’s websites and browsers only use 10% of what your PC offers, but with Internet Explorer 9 you can tap into the power of Windows and your whole PC so your websites look and perform as if they were native to Windows with GPU accelerations and the new JavaScript engine. And because it’s build on standards, the same markup you write not only works across the web, but runs faster and delivers a richer experience through Windows and Internet Explorer 9 and 10!.

download slides

A partire dalla RC di IE9 la Navigation Timing interface è implementata senza più il prefisso del vendor e potete provarla su questa pagina del IE Test Drive

Il working group sta già lavorando a due nuove interfacce Resource Timing e User Timing che aggiungeranno delle funzionalità che consentiranno agli sviluppatori di misurare ulteriorment le prestazioni delle singole risorse.

Per determinare la versione del browser via JS si utilizzano genericamente le API  navigator.appVersion, navigator.userAgent e navigator.appName ma spesso nel codice che viene scritto , non si tiene conto delle differenti modalità di document mode che Internet Explorer applica, generando quindi degli script che non determinano correttamente la versione del browser. Internet Explorer può infatti, applicare versioni di document mode diverse in base alla struttura del DOCTYPE della pagina e quando viene abilitata la compatibility view, può anche inviare al Web Server uno user agent differente anche nell'header della richiesta HTTP e quindi non soltanto nelle API JS dell'oggetto navigator.

In questo articolo su MSDN trovate un'ottima descrizione dei differenti document mode di Internet Explorer ed in questo post una descrizione del browser mode, del ruolo della compatibility view e del document mode. Determinare il document mode che si applica nell'esecuzione di un a pagina è molto importante non solo per la versione del browser, ma anche perchè le funzionalità di HTML5 in IE9 vengono implementate solo con l'applicazione del document mode IE9 Standard. E' possibile determinare con facilità quale document mode o browser mode viene applicato nella navigazione con IE9 su un sito, utilizzando la developer toolbar. Facendo F12 dopo aver caricato la pagina, comparirà la developer toolbar e tra i menù disponibili troverete anche il browser mode e il document mode che indicano le modalità in quel momento in uso, come potete vedere nell'immagine di seguito:

i menù permettono anche di forzare l'applicazione di uno specifico browser mode o document mode. 

Moltissimi script che usano la navigator.appVersion , fanno detect del numero di versione senza tener presente che in caso si applichino document mode precedenti, nella app version viene indicato come primo elemento la versione del browser verso cui il browser sta applicando la compatibiltà, oltre all'indicazione appunto, della versione del browser. Ad esempio nel caso di rendering di una pagina senza DOCTYPE il browser andrà a caricarla in quirks mode e avremo per il valore di navigator.appVersion:

 "5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8; Zune 4.7)"

 dove vedete indicato per primo il valore 5.0 proprio perchè si applica il document mode corrispondente appunto alla modalità quirk e viene indicata la versione di IE9 in modalità compatibile.

Per poter determinare correttamente via JavaScript la versione dl browser e distinguerla anche dal document mode in uso nella pagina è consigliabile usare una funzione come quella indicata di seguito, valida anche per le versioni precedenti e che continuerà a funzionare anche per le successive versioni di IE :

function getInternetExplorerVersion()
{
  var rv = -1; 
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

La funzione ritorna -1 nel caso in cui il browser non è Internet Explorer, altrimenti riporta la versione del browser indipendentemente dal document mode in uso nell'esecuzione della pagina.

Un'altra interessante potenzialità del Canvas che a partire dalla RC di IE9 è stata completata e migliorata significativamente dal punto di vista delle performance, riguarda la possibilità di utilizzare le API del Canvas che consentono via JavaScript di manipolare direttamente a livello di Pixel con un approccio RGBA il contenuto del Canvas, consentendo l'applicazione di trasformazioni e manipolazioni del contenuto, utili per costruire interessanti effetti grafici nelle nostre applicazioni Web. La principale API disponibile sul context 2D del Canvas che consente l'accesso ai pixel è il metodo getImageData(posX,posY,imgWidth,imgHeight). Questo metodo restituisce un CanvasPixelsArray che contiene essenzialmente i pixel dell'immagine estratta nella proprietà data alla posizione e con le dimensioni passate al metodo. E' possibile accedere e modificare il contenuto dell'array contenente i pixel e riapplicare l'arrai con le modifiche ad un Canvas in una specifica posizione con il metodo putImageData(pixelsArray,posX,posY) .

Il CanvasPixelsArray consente di accedere ai pixel come abbiamo detto, con una struttura rgba.Contiene praticamente per ogni pixel 4 posizioni,  3 contengono rispettivamente i valori da 0 a 255 RGB e una contiene l'alpha . Ad esmpio per accedere al parametro alpha del primo pixel estratto con getImageData, occorre accedere all'elemento nella posizione 3 dell'Array, mentre ad esempio nella posizione 4 troviamo il valore R del secondo pixel estratto.

Di seguito abbiamo un semplice esempio che illustra praticamente l'utilizzo delle API. Nell'esempio viene caricata un immagine in un Canvas e poi accedendo ai pixel, invertito il valore del R di tutti i pixel e ridisegnata l'immagine manipolata nel Canvas:

 <!DOCTYPE html />

<html lang="en">
<head>
    <title></title>
<script type="text/javascript" language="javascript">

    this.onload = function () {
        var myCanvas = document.getElementById('myCanvas');
        if (myCanvas.getContext) {
            var ctx = myCanvas.getContext("2d");
            var img = new Image();
            img.src = "IELogo.png";

            img.onload = function () {
                ctx.canvas.height = img.height;
                ctx.canvas.width = img.width;
                ctx.drawImage(img, 0, 0);

                var pixelsArray = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

                var data = pixelsArray.data;

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

                    data[i+1] = 255 - data[i]; //invert G in pixel
               }
           
                ctx.putImageData(pixelsArray, 0, 0);
            }
        }

    }

</script>

</head>
<body>

<canvas id="myCanvas">
 Canvas is not supported.
</canvas>
</body>
</html>

 Altra interessante API del Canvas che permette di estrarre i pixel e salvarli anche in un file o rileggerli come un immagine direttamente è il metodo toDataURL("image/png")  . La specifica prevede il supporto del formato png con questo metodo e utilizzando questa API si può direttamente estrarre l'immagine. Ad esempio, rimanipolando l'esempio precedente possiamo aggiungere un tag image e quindi , dopo aver impostato a display:none il canvas, disegnare nel tag image il risultato della modifica dell'immagine:

<!DOCTYPE html />

<html lang="en">
<head>
    <title></title>
<script type="text/javascript" language="javascript">

    this.onload = function () {
        var myCanvas = document.getElementById('myCanvas');
        var im = document.getElementById('im');
        if (myCanvas.getContext) {
            var ctx = myCanvas.getContext("2d");
            var img = new Image();
            img.src = "IELogo.png";

            img.onload = function () {
                ctx.canvas.height = img.height;
                ctx.canvas.width = img.width;
                ctx.drawImage(img, 0, 0);

                var pixelsArray = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

                var data = pixelsArray.data;

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

                    data[i + 1] = 255 - data[i]; //invert G

                }

                ctx.putImageData(pixelsArray, 0, 0);
                im.src  = ctx.canvas.toDataURL("image/png");
            }
        }

    }

</script>

</head>
<body>

<canvas id="myCanvas" style="display: none"" >
 Canvas is not supported.
</canvas>

<img id="im" />
</body>
</html>
 

E' possibile anche manipolare i contenuti partendo dal catturare le immagini da un video in riproduzione in un tag video.  Di seguito  un esempio di utilizzo di questa API per ridisegnare un video che ha uno sfondo uniforme, su uno sfondo differente. Viene usata una funzione js con un interval che ogni 50 millisecondi disegna il frame corrente del video in riproduzione su un canvas nascosto e accedendo con getImage() ad ogni singolo pixel, porta a zero l'alpha dei pixel completamente blu . La funzione  prende poi l'immagine manipolata e la ridisegna su un canvas visibile dove viene impostata una immagine differente come background, producendo così la riproduzione del video nel Canvas su un background differente, utilizzando direttamente le API del browser del canvas e del tag video.

Di seguito il codice della pagina:

<!DOCTYPE html>
<html>
<head>
    <style>
        body
        {
            background: black;
            color: #CCCCCC;
        }
        #c2
        {
            background-image: url('Background.jpg');
            background-repeat: no-repeat;
        }
        div
        {
            float: left;
            border: 1px solid #444444;
            padding: 10px;
            margin: 10px;
            background: #3B3B3B;
        }
    </style>
    <script type="text/javascript">
        var processor = {
            timerCallback: function () {
                if (this.video.paused || this.video.ended) {
                    return;
                }
                this.computeFrame();
                var self = this;
                setTimeout(function () {
                    self.timerCallback();
                }, 50);
            },

            doLoad: function () {
                this.video = document.getElementById("video");
                this.c1 = document.getElementById("c1");
                this.ctx1 = this.c1.getContext("2d");
                this.c2 = document.getElementById("c2");
                this.ctx2 = this.c2.getContext("2d");
                var self = this;
                this.video.addEventListener("play", function () {
                    self.width = self.video.videoWidth / 2;
                    self.height = self.video.videoHeight / 2;
                    self.timerCallback();
                }, false);
            },

            computeFrame: function () {
                this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
                var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
                var l = frame.data.length / 4;

                var data = frame.data;
                for (var i = 0; i < l; i++) {
                    var r = data[i * 4 + 0];
                    var g = data[i * 4 + 1];
                    var b = data[i * 4 + 2];
                    if (g == 0 && r == 0 && b == 255)
                        data[i * 4 + 3] = 0;
                }
                this.ctx2.putImageData(frame, 0, 0);
                return;
            }
        };
    </script>
</head>
<body onload="processor.doLoad()">
    <div>
        <video id="video" src="video.mp4" controls width="336" height="256"  />
    </div>
    <div>
        <canvas id="c1" width="336" height="256" style="display: none">
        </canvas>
        <canvas id="c2" width="336" height="256">
        </canvas>
    </div>
</body>
</html>

e qui il risultato nel browser:

A good example of this capability, currently available in Italy, is from RTI New Media - Mediaset. Mediaset is one of the top broadcasters in Italy and RTI New Media inside Mediaset Group is responsible for their web video platform and in particular for video.mediaset.it web site. Video.mediaset.it publishes free live and on demand video content supported by an advertising model from main Mediaset TV channels. In addition, on the same web site RTI new media publishes daily all of the video news content for the TGCOM web site and for SportMediaset web site that are top tier web sites in Italy in terms of importance and number of visitors. Below is an image from the Mediaset web site :

Content from the http://video.mediaset.it  and  http://www.tgcom.mediaset.it/  web site is available on PC and Mac and for news content videos are available also on Windows Phone 7 and iPhone^TM / iPad^TM devices with a downloadable application. Below is an image from the Windows Phone 7 application:

The video platform in use on this Web Site is based on the IIS Media Services platform which permits the delivery of  adaptive HTTP streaming and progressive download . Key features of the service include:

•  SnackTV content that delivers free short videos from main Mediaset TV channels and leverages .mp4 and .fv4 content, delivered via IIS Media Services progressive download and Bit Rate Throttling capability in IIS Media Services.
• Full episode area (puntate intere) that deliver content from TV shows, fictions, etc. from the main Mediaset TV channels, that leverage IIS Media Services and IIS Smooth Streaming and Silverlight for deliver of high quality content with the best experience for customers. Some content is also securely delivered using Microsoft Playready DRM for content protection.
• Moto GP and Sport that also leverage IIS Smooth Streaming , Silverlight and Microsoft Playready DRM for secure delivery of premium content.
• News videos live and on demand that also leverages IIS Media Services and IIS Smooth Streaming and Windows Media Services.

As I described before, some video content in particular from the news area are also available on Windows Phone 7 and Apple Devices. For delivery of  this type of content on mobile devices, RTI New Media uses IIS Media Services features . On Windows Phone 7 the application is built using the IIS Smooth Streaming Client and Silverlight.  This  combinationgives the phone the ability to stream live and on-demand adaptive HTTP content in the IIS Smooth Streaming format On Apple Devices, RTI leverage IIS Media Services new capabilities to deliver Apple HTTP live streaming format for both live and on-demand.

The content was encoded in Smooth Streaming format using the H.264 video codec and AAC audio, and was transmuxed (repackaged from one file format to another without re-encoding) to Apple HTTP live streaming format using the  IIS Transform Manager (currently in Beta) , leveraging a single encoding and delivery platform.

IIS Transform Manager (IIS TM)  is a new component of the next version of the IIS Media Services platform and provides not only  Iphone/Ipad support but also a simple integrated video encoding/encrypting and batch conversion and transformation of video files. IIS Transform Manager integrates directly with Expression Encoder 4 to allow you to use "watch folders" to queue up multiple encode jobs on your server and deliver them directly to IIS Media Services 4.0 Web folders as IIS Smooth Streaming presentations. Transform Manager offer also an SDK that permits developers to write custom Task plug-ins that can be used with Transform Manager to support custom actions, third-party encoders, or your own custom workflows. Transform Manager comes with a specific task that RTI New Media leverage to convert IIS Smooth Streaming presentations directly into MPEG-2 Transport Streams in the Apple HTTP live streaming format for delivering content to Apple devices and publish it with IIS Media Services 4.0.

The video platform on video.mediaset.it also benefits from the use of IIS Application Request Routing ( IIS ARR) in order to implement a flexible and scalable HTTP edge server infrastructure. Edge caching in the HTTP delivery infrastructure provides a level of caching able to amplify content delivery capability on video.mediaset.it with the right and flexible scalability.  

Below you can see a high level picture of the video delivery architecture:

The services delivered on video.mediaset.it from RTI new media are a great example of the integrated media platform capabilities of IIS Media Services and shows how quick it is to implement a robust and interoperable solution that simplifies the delivery of video content for both live and on-demand to a large numbers of different client devices on a single platform. 

If you are looking for more details  about the latest support for iPhone\iPad in IIS Media Services and  IIS Transform Manager you can reference this online tutorial, "Encode and Deliver On-Demand Smooth Streams with IIS Transform Manager and IIS Media Services 4"  and for details on Live Streaming, read this tutorial on Live Streaming for iPhone/iPad with IIS MS 4.0.

To download the latest release of the IIS Media Services platform and learn more, visit http://iis.net/media and stay tuned for the Beta of IIS TM that coming soon in march\april timeframe !!!

Le API del Web Storage offrono essenzialmente due oggetti il sessionStorage e il localStorage che consentono di gestire un meccanismo di persistenza per dominio in modalità per sessione o persistente. L'utilizzo è molto semplice, si usano i metodi setItem e removeItem per inserire e cancellare item utilizzando un meccanismo chiave valore . Ad esempio per inserire un valore:

localStorage.setItem("keyName","keyValue");

per rimuoverlo:

localStorage.removeItem("keyName");

Disponibili anche una buona serie di librerie che consentono di gestire il fallback sui browser che non supportano il Web Storage come ad esempio la libreria storage polyfill di Remy Sharp. 

 Ampia e continua la discussione nel W3C per ampliare il supporto nel browser per lo storage locale, allargandolo anche alla presenza di un vero e proprio database semplificato che consenta di memorizzare e gestire dati in modo strutturato e apra la strada a scenari di sincronizzazione di dati. Tra le specifiche proposte abbiamo la Web SQL Database API e la parte di IndexedDB . Quest'ultima è la specifica proposta da Oracle , Microsoft e Mozilla, su cui stanno convergendo la maggior parte dei membri del W3C, convergenza già in corso come tendenza da alcuni mesi e che comincia a concretizzarsi anche in annunci di implementazione nei browser come ad esempio per firefox. Anche per chrome sta succedendo altrettanto  con l'avvio dell'implementazione di IndexedDB e nella parte di Web SQL Database nelle specifiche del W3C si legge oramai formalmente nello status del documento: "Beware. This specification is no longer in active maintenance and the WebApplications Working Group does not intend to maintain it further" ed è quindi oramai IndexedDB la specifica candidata per l'implementazione da parte della maggior parte dei browser. Stiamo comunque parlando di specifiche di standard ancora in definizione e quindi immature per un utilizzo di applicazioni reali e che quindi vanno utilizzate con cautela, come anche i diversi vendor di browser segnalano. Ad esempio in questo post sull'implementazione nella beta di firefox leggiamo "Keep in mind that IndexedDB is brand new and is not uniformly supported by all browsers, and please file bugs for any behavior that seems to contradict the specification!". 

Il Web è una piattaforma in continua evoluzione, e ci sarà sempre una tensione tra gli sviluppatori che desiderano utilizzare le tecnologie più recenti e le specifiche ufficiali ancora non consentono, e gli sviluppatori di  applicazioni di business che vogliono costruire qualcosa per una specifica che si aspettano stabile e supportata per un decennio. Non in tutte le situazioni è possibile aggiornare i browser e le applicazioni ogni notte o anche ogni settimana, ma al tempo stesso è anche importante avere la possibilità di valutare l'implementazione di specifiche ancora non complete e di stimolare e partecipare all'implemetazione delle stesse.

Per permettere il test delle specifiche in evoluzione e garantire allo stesso tempo, una chiara e netta suddivisione tra le specifiche stabili ed utilizzabili e la parte di specifiche sperimentali, Microsoft sta adottando nello sviluppo di IE un approccio differente rispetto ad altri browser che inserisco e modificano le implementazioni direttamente nelle build , generando anche situazioni di confusione come successo recentemente con i websocket (http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/) . Nelle preview e nelle beta ed a maggior ragione nelle release finali delle varie versioni di IE, vengono inserite soltanto le implementazioni delle specifiche che sono sufficientemente mature, documentate e che hanno la garanzia di un comportamento uniforme nelle diverse implementazioni nei vari browser. Per consentire invece, la sperimentazione anche della parte di specifiche in evoluzione e che sono candidate ad una futura implementazione uniforme, sono stati appunto creati gli HTML5 Labs . Attraverso gli HTML5 Labs si possono aggiungere al browser delle implementazioni sperimentali delle nuove specifiche e cominciare a provarle utilizzandole in modo controllato, avendo così una netta separazione tra gli elementi stabili da quelli in forte evoluzione, garantendo pienamente gli sviluppatori rispetto alla stabilità e la compatibilità delle implementazioni supportate nel browser.

Tra le specifiche disponibili come componenti aggiuntivi su HTML5 Labs abbiamo appunto l'implementazione di IndexedDB che possiamo scaricare dal sito e registrare localmente sul nostro PC per sperimentarla utilizzando IE 9. Si come già detto, di una implementazione per test  realizzata attraverso un ActiveX. Nel package scaricato da HTML5 Labs troviamo un readme introduttivo che spiega come configurare e registrare il componente aggiuntivo , un file js di base che carica il componente nella pagina e genera delle variabili per consentire un utilizzo diretto dei metodi dell'ActiveX da JS e una serie di esempi che illustrano il funzionamento delle API implementate al momento secondo .  

 IndexedDB prevede essenzialmente delle API con due modalità di utilizzo: sincrono e asincrono. Si possono creare dei database locali comuni ad uno specifico dominio. Attraverso le API si possono gestire  gestione dei dati  avanzate attraverso la gestione di indici per l'accesso ai dati. Si possono anche utilizzare delle transazioni per la gestione di più operazioni sui dati  e vengono usati dei di dati persistenti in una struttura B-tree che permettono in modo efficace  l'inserimento, cancellazione, e accesso in-order anche di un numero elevato di record di dati.

Cercherò ora di introdurre le modalità con cui è possibile gestire con JS delle animazioni sfruttando il context 2D del Canvas. La gestione delle animazioni con il Canvas può essere effettuata attraverso la modifica diretta del suo contenuto, sfruttando delle funzioni JS richiamate ad intervalli specifici, con una frequenza determinata in base al frame rate che si vuole ottenere nella gestione del ridisegno del movimento. Si procede in pratica  ad intervalli con:

- cancellare l'area canvas coinvolta

- ridisegnare l'elemento nella nuova posizione

Di seguito un semplice esempio di animazione dove abbiamo una pagina contenente un canvas e una funzione draw che ogni 10 millisecondi ridisegna il canvas, producendo un'animazione di scorrimento di una immagine.

Il processo di avvio dell'intervallo di ridisegno, viene eseguito solo dopo il load dell'immagine per avere tutti gli elementi, scaricati localmente e quindi utilizzabili per l'esecuzione dell'animazione.

<!DOCTYPE html>

<html lang="en">
<head>
<title title="test anim"></title>
<meta charset="utf-8" />

  <script language="javascript" type="text/javascript">  
  var myCanvas, ctx;
  var x1=10,y1=10, distance=5;
  var img;
  var imgWidth;
  var imgHeight;

  window.addEventListener("DOMContentLoaded", Main, false);
  
  function Main(){
  
   myCanvas = document.getElementById("myCanvas");
   
   if (myCanvas.getContext) {
    ctx = myCanvas.getContext("2d");
    img = new Image();
    
    img.addEventListener("load", function(){
     
     imgWidth = 100;
     imgHeight = 100;
     
     lastFrameTime = new Date().getTime();
     
     setInterval(draw, 16);
    }, false);
    
    img.src = "IELogo.png";
   }
  }
  
   
  function draw() {
   
   y1 += distance;
   
   // make image show up again when it falls of the page
   if (y1 > (ctx.canvas.height - imgHeight)) {
    y1 = 10;
   }
   
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
   ctx.fillText("Sample Animation", x1, 10);
   ctx.drawImage(img, x1, y1, imgWidth, imgHeight);
    
  }
 
 </script>
</head>
<body>
 
<canvas id="myCanvas" width="500" height="500">
 Canvas is not supported.
</canvas>
</body>
</html>

 Come si vede dal codice contenuto nella funzione draw, viene usata una variabile per mantenere la posizione dell'ultimo ridisegno all'interno del canvas e, dopo aver cancellato il canvas, con le API del context 2D si ridisegna l'elemento nella nuova posizione. Richiamando la funzione draw con un intervallo di 16 millisecondi , si produce una animazione con teoricamente 60 frame al secondo, dipendente ovviamente dalla velocità con cui il browser esegue la funzione di ridisegno. E' anche possibile applicare delle trasformazioni usando le API specifiche  del canvas (rotate, translate, transform ) durante un'animazione per gestire il funzionamento della stessa.

Oltre alla precedente modalità di cancellazione e riscrittura, le API del canvas offrono la possibilità di gestire lo stato del contenuto prima di applicare un nuovo disegno. Attraverso i metodi save e restore è possibile gestire lo stato e salvarlo prima di applicare una trasformazione e con save, riportarlo nello stato precedente, funzione molto utile nel caso in cui si debba, ad esempio, ridisegnare più elementi in una animazione. Ad esempio se si devono disegnare più elementi in sequenza si può utilizzare questa funzionalità:

 for(var a=1;i<10;i++)
{
 ctx.save();
 ctx.translate(a,a);
 drawSomething();
 ctx.restore();
}

Nel caso di  IE9 nelle animazioni di immagini, il ridisegno delle stesse sfrutta le capacità della GPU e consente di ottenere delle per eccellenti, sfruttando intervalli di ridisegno che consentono di ottenere un elevatissimo numero di frame al secondo con una eccellente esperienza utente ed un ottima fluidità nelle animazioni. Un bel esempio di animazioni lo trovate nel Test Drive Center  come ad esempio l'applicazione fishIETank e Galactic . Anche nel già citato Canvas Pad trovate un esempio di animazione utile per approfondire l'utilizzo del canvas per questo tipo di operazione.

Una delle fasi dell'animazione è quello di rendere una immagine (o una cella singola animazione) nella posizione specifica e ci sono due principali tecniche di calcolo della posizione specifica. Queste tecniche di animazione sono:
- Animazione frame-based
- Animazioni time-based 

Nell'animazione frame-based oggetti vengono spostati lo stesso numero di pixel in ogni aggiornamento. Nelle time-based lo spostamento è basato sul tempo e vengono spostati lo stesso numero di pixel per unità di tempo. Ognuno dei due approcci ha vantaggi e svantaggi ed è più idoneo in determinati scenari. 

 L'animazione frame-based è semplice da implementare ma è fortemente dipendente dalla velocità del PC così come lo spazio percorso dall'animazione non è costante e per tanto questo tipo di tecnica è poco usata nei giochi e di più per animazioni che non hanno dei percorsi di dimensione predefinita in una specifica unità di tempo. Di seguito un semplice esempio di frame-base animation, dove ctx è il context 2d del canvas, che in questo caso cancella completamente il canvas perchè abbiamo un unico oggetto presente nell'animazione:

var distance=5 lastFrameTime = 0;
setInterval(drawTimeBased, 16);

function drawFrameBased() {

y1 += distance;

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, x1, y1, imgWidth, imgHeight);
}

Di seguito abbiamo un esempio di questo tipo di animazione  applicata ad un canvas sovrapposto ad un video, che illustra la flessibilità con cui il canvas può essere usato anche per gestire animazioni in overlay ad un video, come ad esempio banner pubblicitari o altri elementi interattivi:

 <!DOCTYPE html>
<html>
<head>

</head>
<body>

<video id="myVideo" src="fish.mp4"  height="480" width="640"autoplay controls loop>
 Video is not supported.
</video>

<canvas id="myCanvas"  height="480" width="640" style="left: 0px; top: 0px; position: absolute;" >
 Canvas is not supported
</canvas>
<script language="javascript">
    window.addEventListener("load", Main, false);
    var y1 = 10, distance = 1;
    var customText = "Canvas text on top of video";
    var ctx;
    var msg;
    function Main() {

        msg = document.getElementById("msg");
        myCanvas = document.getElementById("myCanvas");
        if (myCanvas.getContext) {
            ctx = myCanvas.getContext("2d");
            ctx.shadowOffsetX = 5;
            ctx.shadowOffsetY = 5;
            ctx.shadowBlur = 5;
            ctx.shadowColor = "grey";
            ctx.fillStyle = "black";
            ctx.font = '35px "Segoe UI" bold';

            setInterval(draw, 16);
        }

    }
    function draw() {

        if (distance < 0) {
            distance = 0;
        }
        y1 += distance;

        // make text show up again when it falls of the page
        if (y1 > (ctx.canvas.height - 35)) {
            y1 = 10;
        }

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        ctx.fillText(customText, 60, y1);
      
    } 

</script>
</body>
</html>

L'Animazione time-based è più complicata da implementare. In questo tipo di animazione la distanza per spostare una specifica immagine è calcolato su l'unità di tempo. Questo tipo di animazione non è dipendente della macchina e può essere usata nei giochi. Nei giochi in genere tutti i giocatori hanno la stessa quantità di tempo da spendere per il certo livello, a prescindere macchina utilizzata per giocare una partita - quindi abbiamo bisogno di animazione indipendente macchina. La fluidità dell'animazione è dipendente dalle performance del PC su cui si esegue ma le distanze sono costanti nell'unità di tempo. Ecco di seguito un esempio di codice di utilizzo di un'animazione time-based:

var speed = 250, lastFrameTime = 0;
setInterval(drawTimeBased, 16);

function drawTimeBased() {
// time since last frame
var now = new Date().getTime();
dt = (now - lastFrameTime) / 1000;
lastFrameTime = now;

y2 += speed * dt;

ctx.clearRect(x2, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, x2, y2, imgWidth, imgHeight);
}

In questo caso l'oggetto non viene spostato di una distanza predeterminata ad ogni intervallo di ridisegno dell'animazione, ma viene invece calcolato lo spostamento, in base al tempo trascorso dal precedente ciclo di rendering.
Ricordando che la distanza è uguale velocità moltiplicata per il tempo, che la velocità è una costante che abbiamo fissato da qualche parte nel codice (250 pixel nel nostro caso), e che  dt è calcolato in ciascun ciclo, possiamo facilmente calcolare la distanza necessaria per muovere il nostro oggetto in ogni step dell'animazione. Tutto quello che dobbiamo fare è moltiplicare la velocità per il delta del tempo, ottenendo i pixel da applicare al movimento.

Di seguito un semplice esempio delle due tipologie di animazione applicate sullo stesso canvas a coordinate differenti:

<!DOCTYPE html>

<html lang="en">

 <head>
<title title="test anim"></title>
<meta charset="utf-8" />

 <script language="javascript" type="text/javascript">  
  var myCanvas, ctx;
  var x1=10,y1=10,x2=200,y2=10, distance=5, speed = 250;
  var img;
  var imgWidth;
  var imgHeight;
  
  var lastFrameTime = 0;  

  window.addEventListener("load", Main, false);
  
  function Main(){
  
   myCanvas = document.getElementById("myCanvas");
   
   if (myCanvas.getContext) {
    ctx = myCanvas.getContext("2d");
    img = new Image();
    
    img.addEventListener("load", function(){
     
     imgWidth = 100;
     imgHeight = 100;
     
     lastFrameTime = new Date().getTime();
     
     setInterval(draw, 16);
    }, false);
    
    img.src = "IELogo.png";
   }
  }
  
  function draw() {
   drawFrameBased();
   drawTimeBased();
  }
  
  function drawFrameBased() {
   
   y1 += distance;
   
   // make image show up again when it falls of the page
   if (y1 > (ctx.canvas.height - imgHeight)) {
    y1 = 10;
   }
   
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
   ctx.fillText("Frame Based Animation", x1, 10);
   ctx.drawImage(img, x1, y1, imgWidth, imgHeight);
    
  }
 
  function drawTimeBased() {
   
   // time since last frame
   var now = new Date().getTime();   
   dt = (now - lastFrameTime) / 1000;
   lastFrameTime = now;
   
   y2 += speed * dt;
   
   // make image show up again when it falls of the page   
   if (y2 > (ctx.canvas.height - imgHeight)) {
    y2 = 10;
   }
   
   ctx.clearRect(x2, 0, ctx.canvas.width-(x1+imgWidth), ctx.canvas.height);
   ctx.fillText("Time Based Animation", x2, 10);
   ctx.drawImage(img, x2, y2, imgWidth, imgHeight);   
   
  }

 </script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
 Canvas is not supported.
</canvas>
</body>
</html>

 Come potete vedere nell'esempio precedente le due animazioni vengono eseguite assieme ed in questo caso, viene cancellato prima del ridisegno solo la porzione del canvas che contiene la posizione dell'elemento su cui si esegue l'animazione, utilizzando il metododo del context clearRect  utilizzando come parametri le specifiche coodinate e dimensioni.

Nel caso di animazioni complesse con elementi che durante il movimento , simulano anche altri tipi di movimento come ad esempio l'applicazione FishIETank che simula un acquario con i pesci che si muovono nello spazio e che cambiano direzione e muovono la coda per simulare il nuoto:

o come il bellissimo esempio\gioco implementato in HTML5 Pirates Love Daises :

Dove ci sono vari personaggi animati su canvas.

Per gestire  animazioni di questo tipo e garantire le migliori performance possibili, sfruttando in particolare su IE9 l'accelerazione grafica, si utilizzano genericamente delle tecniche  ( sprite animation ) che accorpano in un unica immagine gli stati degli elementi durante le animazioni, che vengono suddivisi in celle con delle specifiche coordinate, utilizzate poi nelle funzioni che ridisegnano gli oggetti.

 Ad esempio nel caso dell'acquario del FishIETank  abbiamo, una immagine di background che viene applicata al canvas e una immagine in cui sono contenuti tutti gli stati necessari all'animazione dei pesci e le diverse "razze" di pesci che vengono poi divise in celle che permettono attraverso le coordinate definite di ridisegnare una specifica cella sul canvas:

 Di seguito un esempio della funzione che sintetizza l'utilizzo delle immagini all'interno dell'animazione:

<img id="imageStrip" src="fishstrip.png" style="display: none" tabIndex="-1">

// rif allo strip di img
imageStrip = document.getElementById('imageStrip');

ctx.drawImage (

// informazioni source image

FishImageStrip, // source
fishW * cell, // sX della cella
fishH * species, // SY  della cella
fishW, // larghezza della cella
fishH, // altezza della cella

// Canvas destinazione
x, // X dove disegnare il pesce
y, // Y dove disegnare il pesce
fishW, // larghezza 
fishH, // altezza 
);

 Come si vede nel codice precedente, viene caricata l'intera immagine è poi utilizzate le coordinate della cella per indicare la porzione di immagine (cella) da disegnare nel canvas di destinazione ad una specifica coordinata, con delle dimensioni definite.

 Il particolare nell'applicazione FishIETank dell'acquario viene essenzialmente:

1-Caricato ed impostato lo sfondo dell'acquario

2- caricata l'intera sprite image

3- applicare al canvas le trasformazioni per disegnare il pesce, salvando prima lo stato del canvas, per riapplicarlo ripetendo poi le operazioni per ogni pesce

Questa demo di acquario, utilizza una animazione Time-Based. Di seguito un esempio semplificato della funzione di disegno dei pesci:

var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext("2d");
…
ctx.save();
ctx.translate(x, y);
ctx.scale(scale, scale);
ctx.transform(flip, 0, 0, 1, 0, 0);
ctx.drawImage(imageStrip, fishW * cell, fishH * species, fishW, fishH, -fishW / 2, -fishH / 2, fishW, fishH);
scale = nextScale;
ctx.restore();

Proprio come ho spiegato prima, viene salvato lo stato del canvas, applicata la trasformazione e disegnata la cella corretta in base allo stato dell'animazione e quindi ripristinato lo stato. Viene applicata anche una trasformazione personalizzata dove  il primo parametro (flip) è 1 o -1 serve per eventualmente riflettere pesce in una direzione diversa in base alla direzione che il pesce ha nell'acquario. Le trasformazioni nel canvas in IE9 vengono svolte sfruttando completamente la GPU con  l'accelerazione grafica offerta dal browser, garantendo delle perfomance eccellenti nell'animazione.

Approfondendo il funzionamento dell'applicazione nel test drive di IE9, trovate  di seguito una porzione del codice della applicazione fishIETank che potete anche trovare online   :

//set up the canvas
           var tempCtx = document.createElement("canvas");
            tempCtx.id = "canvas1";
            tempCtx.setAttribute('width', WIDTH);
            tempCtx.setAttribute('height', HEIGHT);
            tempCtx.setAttribute('tabIndex', -1);
            document.body.insertBefore(tempCtx, document.body.firstChild);

            var tempCtx3 = document.createElement("canvas");
            tempCtx3.id = "background";
            tempCtx3.setAttribute('width', WIDTH);
            tempCtx3.setAttribute('height', HEIGHT);
            tempCtx3.setAttribute('tabIndex', -1);
            document.body.insertBefore(tempCtx3, document.body.firstChild);

            ctx = tempCtx.getContext("2d");

            ctx3 = tempCtx3.getContext("2d");

            //draw the background
            backgroundImage = document.getElementById('backgroundImage');
            drawBackground();

            //create the fish
            imageStrip = document.getElementById('imageStrip');
            createFish(startFish);

            //start animation
            setInterval(function () { draw(); }, 16);
   
    window.addEventListener("resize", OnWindowResize, false);

Vengono creati i canvas utilizzati nella parte grafica, impostato il background dell'acquario e creati gli oggetti che rappresentano i pesci ed avviato l'intervallo che chiama la funzione che si occupa di ridisegnare l'acquario e implementare quindi le animazioni. La funzione draw essenzialmente effettua un ciclo nella collezione di oggetti che rappresentano i pesci, creati nella funzione createFish e che consarvano lo stato in cui si trovano all'interno dell'acquario e chiama il metodo swim, che fa essenzialmente ridisegnare l'acquario:

function draw() {
            //clear the canvas
            ctx.clearRect(0, 0, WIDTH, HEIGHT);

            //set velocity of fish as a function of FPS
   var fps = fpsMeter.meterFps;
     
            power = Math.min(fps, 60);
   if(isNaN(power)) power = 1;
            //velocity = 100 + 100 * (power * power / 3600); //exponential curve between 100-200
            velocity = Math.floor((power * power * .5) / 3) < 1 ? 1 : Math.floor((power * power * .5) / 3);  //exponential curve between 1 and 600.

            // Draw each fish
            for (var fishie in fish) {
                fish[fishie].swim();
            }  

   //draw fpsometer with the current number of fish       
            fpsMeter.Draw(fish.length); 
        }

la funzione swim, essenzialmente ridisegna il pesce dopo aver calcolato le coordinate della posizione del pesce. Il cuore nella funzione lo vedete di seguito:

//draw the fish
                //locate the fish
                ctx.save();
                ctx.translate(x, y);
                ctx.scale(scale, scale); // make the fish bigger or smaller depending on how far away it is.
                ctx.transform(flip, 0, 0, 1, 0, 0); //make the fish face the way he's swimming.
                ctx.drawImage(imageStrip, fishW * cell, fishH * species, fishW, fishH, -fishW / 2, -fishH / 2, fishW, fishH); //draw the fish
                ctx.save();
                scale = nextScale // increment scale for next time
                ctx.restore();
                ctx.restore();
               
                //increment to next state
                x = nextX;
                y = nextY;
                z = nextZ;
                if (cell >= cellCount-1 || cell <= 0) { cellReverse = cellReverse * -1; } //go through each cell in the animation
                cell = cell + 1 * cellReverse; //go back down once we hit the end of the animation

Che come descritto prima, essenzialmente salva il contesto del canvas, posiziona e disegna il pesce e ripristina lo stato e incrementa le variabili per il successivo ridisegno. Nella demo FishIETank potete vedere ed apporfondire il resto dell'esempio di animazione con il canvas realizzata.