Dev

HTML 5 & Silverlight 5

This post is a translation of https://blogs.msdn.com/b/eternalcoding/archive/2011/06/06/fr-html-5-vs-silverlight-5.aspx.

SVSH

Philosophy

The goal of this paper is to present an objective comparison between Silverlight 5 and HTML 5 (with: JavaScript / ECMAScript 5 + CSS3 + any required additional frameworks and APIs). We will only focus on some features: covering these technologies entirely would require a whole book.
The main idea is to provide a guide to help you choose a technology as part of a planned project.
All decisions elements could not be presented here of course. You should take this document as a help to decide rather than as an absolute truth.

In each chapter we will focus on functionalities but also on ease of implementation and performance. The goal here is not to study in detail the features of HTML 5 or Silverlight 5.

Sample source code is available here.

To install Silverlight 5 beta you can go here.

HTML vs XAML

The two competitors are tied on the philosophy as they are both based on a markup language (HTML and XAML). They also both make extensive use of attributes.

Extensibility

Silverlight 5 allows you to add custom attributes to existing tags via attached properties. It is also feasible in HTML 5, but through the use of an inelegant hack (if HTML 5 does not recognize a tag or an attribute, it will just ignore it. Javascript can then process this information to add the required behavior). An implementation example of this usage is the project KnockOut.

On top of that, Silverlight has the Markup Extensions that add behavior to existing attributes (including Binding or even custom behaviors). Moreover, the list of tags is not fixed since it is possible to develop ones own controls providing a real advantage in the industrialization of a Silverlight solution.

DOM access

In Silverlight, each tag can be accessed directly from the code behind using association by name (x: Name). In HTML 5, it is possible to do the same with the attribute ‘id’ but only in certain browsers. We must therefore go through Javascript’s location services by id, which slightly penalizes ease of development:






  1. var toto = document.getElementById(‘toto’);


  2. toto.style.visibility = ‘hidden’;




Regarding the traversing of logic trees, Silverlight and HTML provide equivalent related services.
It is however worth noting that HTML 5 offers a query tool for its DOM named Selectors API. This enables very efficient search across the objects on the page using selection queries:






  1. var alerts = document.querySelectorAll(“p.warning, p.error”);




In this example, we ask the API to return the list of paragraphs whose class is “warning” or “error”. You can also query for IDs, types and many other criteria.

Code/Tags Separation

Silverlight offers a clear separation between markup and code enabled by Visual Studio and partial classes.

In Javascript, it is possible to leave the code in the html page or use the script tag to outsource the code:






  1. <script type=”text/javascript” src=”canvas.js”></script>




Both competitors thus allow for separation of the design part and the development part, helping worth integration of designers in the project.

Tools

The tooling is an easy fight for Silverlight because Notepad is no match for Visual Studio. Silverlight will indeed benefit from the full power of Microsoft Visual Studio and Microsoft Blend where HTML 5 (for now) virtually has no business tool.

With Blend it is easy to design XAML for Silverlight. It is also easy to debug and to have access to all services (syntax highlights, Intellisense, etc.) with Visual Studio. Not to mention profilers and simple solutions development with drag and drop.

The main tools available today for HTML 5 are browsers development toolbars (F12). They will allow debugging or profiling of your code inside the browser. The result is quite good, but far from the integration and the comfort of Visual Studio.

That will obviously change but for now the productivity champion is Silverlight.

Languages

Development

Silverlight is based on C # or Visual Basic which are strongly typed languages with JIT (Just in Time) compilation. Javascript is an interpreted dynamic language (although it can be compiled on the fly in some browsers). Those are definitely two different approaches.

The absence of compilation can results in late discovery of syntax errors, for example.

Moreover it is more difficult to debug a dynamic language which accepts everything (especially errors). With a strongly typed language, it is not possible (at least, it is hard) to mess up an assignment. With Javascript on the contrary, it is possible to put a table in a variable and two lines below assign an integer to it. Similarly if you make a mistake in an assignment writing for example myobject.prop = 1 and if the property ‘prop’ does not exists, Javascript as a dynamic language will create the property instead of raising an error. This greatly complicates debugging. But it also greatly increases the power of the language and its capabilities. Besides, the new versions of C # have made a step towards the dynamic world with lambdas expressions and other dynamic objects (dynamic).

We don’t want here to criticize the dynamic languages ​​or static languages. It is just important to understand the implications of both.

Performances

The main question though is of course in performance.

So let’s take a simple example: we will calculate a million times a transaction involving the manipulation of strings and mathematical calculation.

We look then the time spent executing our code:













Javascript


Silverlight 5


 





  <p>
    For Javascript:
  </p>

  <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:6d0e816f-e2e6-4b10-8008-796e473c41f9" class="wlWriterSmartContent">
    <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
      <div style="background: #ddd; max-height: 300px; overflow: auto">
        <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
          <li>
            <span style="color: #0000ff"><</span><span style="color: #800000">p</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8217;result&#8217;></span>
          </li>
          <li style="background: #f3f3f3">
            <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
          </li>
          <li>
            <span style="color: #0000ff"><</span><span style="color: #800000">script</span> <span style="color: #ff0000">language</span><span style="color: #0000ff">="javascript"></span>
          </li>
          <li style="background: #f3f3f3">
            &#160;&#160;&#160; <span style="color: #0000ff">var</span> start = (<span style="color: #0000ff">new</span> Date).getTime();
          </li>
          <li>
            &#160;
          </li>
          <li style="background: #f3f3f3">
            &#160;&#160;&#160; <span style="color: #0000ff">var</span> sum = 0;
          </li>
          <li>
            &#160;
          </li>
          <li style="background: #f3f3f3">
            &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < 1000000; index++) {
          </li>
          <li>
            &#160;&#160;&#160;&#160;&#160;&#160;&#160; sum += Math.sqrt((<span style="color: #800000">"coucou"</span> + index).toLowerCase().length);
          </li>
          <li style="background: #f3f3f3">
            &#160;&#160;&#160; }
          </li>
          <li>
            &#160;
          </li>
          <li style="background: #f3f3f3">
            &#160;&#160;&#160; <span style="color: #0000ff">var</span> diff = (<span style="color: #0000ff">new</span> Date).getTime() &#8211; start;
          </li>
          <li>
            &#160;
          </li>
          <li style="background: #f3f3f3">
            &#160;&#160;&#160; <span style="color: #0000ff">var</span> result = document.getElementById(<span style="color: #800000">&#8216;result&#8217;</span>);
          </li>
          <li>
            &#160;
          </li>
          <li style="background: #f3f3f3">
            &#160;&#160;&#160; result.innerText = sum + <span style="color: #800000">&#8216; &#8216;</span> + diff + <span style="color: #800000">&#8216; ms&#8217;</span>;
          </li>
          <li>
            <span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
          </li>
        </ol>
      </div></p>
    </div></p>
  </div>

  <p>
    For Silverlight 5:
  </p>

  <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:be29e944-b990-4783-b267-88d6e73a96d1" class="wlWriterSmartContent">
    <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
      <div style="background: #ddd; max-height: 300px; overflow: auto">
        <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
          <li>
            <span style="color: #2b91af">DateTime</span> start = <span style="color: #2b91af">DateTime</span>.Now;
          </li>
          <li style="background: #f3f3f3">
            &#160;
          </li>
          <li>
            <span style="color: #0000ff">double</span> sum = 0;
          </li>
          <li style="background: #f3f3f3">
            &#160;
          </li>
          <li>
            <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < 1000000; index++)
          </li>
          <li style="background: #f3f3f3">
            {
          </li>
          <li>
            &#160;&#160;&#160; sum += <span style="color: #2b91af">Math</span>.Sqrt((<span style="color: #a31515">"coucou"</span> + index).ToLower().Length);
          </li>
          <li style="background: #f3f3f3">
            }
          </li>
          <li>
            &#160;
          </li>
          <li style="background: #f3f3f3">
            <span style="color: #2b91af">DateTime</span> end = <span style="color: #2b91af">DateTime</span>.Now;
          </li>
          <li>
            &#160;
          </li>
          <li style="background: #f3f3f3">
            result.Text = <span style="color: #0000ff">string</span>.Format(<span style="color: #a31515">"{0} : {1} ms"</span>, sum, end.Subtract(start).TotalMilliseconds);
          </li>
        </ol>
      </div></p>
    </div></p>
  </div>
</p>

<p>
  The result on my computer is:
</p>

<table border="1" cellspacing="0" cellpadding="2" width="368">
  <tr>
    <td valign="top" width="210">
      <p align="center">
        <strong>System</strong>
      </p>
    </td>

    <td valign="top" width="156">
      <p align="center">
        <strong>Time spent</strong>
      </p>
    </td>
  </tr>

  <tr>
    <td valign="top" width="228">
      <em>Silverlight 5</em>
    </td>

    <td valign="top" width="163">
      <p align="center">
        540 ms
      </p>
    </td>
  </tr>

  <tr>
    <td valign="top" width="231">
      Chrome 12
    </td>

    <td valign="top" width="167">
      <p align="center">
        <span style="text-decoration: underline"><em>230 ms</em></span>
      </p>
    </td>
  </tr>

  <tr>
    <td valign="top" width="229">
      IE 10 PP1
    </td>

    <td valign="top" width="170">
      <blockquote>
        <p align="center">
          402 ms
        </p>
      </blockquote>
    </td>
  </tr>

  <tr>
    <td valign="top" width="227">
      IE 9
    </td>

    <td valign="top" width="172">
      <blockquote>
        <p align="center">
          402 ms
        </p>
      </blockquote>
    </td>
  </tr>

  <tr>
    <td valign="top" width="227">
      Firefox 4
    </td>

    <td valign="top" width="172">
      <p align="center">
        712 ms
      </p>
    </td>
  </tr>

  <tr>
    <td valign="top" width="227">
      Opera 11
    </td>

    <td valign="top" width="172">
      <p align="center">
        290 ms
      </p>
    </td>
  </tr>

  <tr>
    <td valign="top" width="227">
      Safari 5
    </td>

    <td valign="top" width="172">
      <p align="center">
        505 ms
      </p>
    </td>
  </tr>
</table>

<p>
  We can see that HTML 5 performance is comparable to Silverlight. Obviously, based on your browser, your mileage may vary and it is obvious that the JavaScript runtime performance will improve in the future. However, we can already see that some browsers are able to do better than Silverlight. I already know that this result will cause an <strong>outcry</strong> but think about it : the modern Javascript runtimes can compile the code in the same way as the .Net JIT do. And if you don’t want to be convinced that managed code and Javascript can run as fast, you should consider that benchmarks (and especially this one) are not reliable <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Sourire" src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/5164.wlEmoticon-smile_62DC511A.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/5164.wlEmoticon_2D00_smile_5F00_62DC511A.png" />.
</p>

<h1>
  SVG vs Shapes
</h1>

<p>
  Silverlight 5 and HTML 5 both offer the possibility of using vector graphics. A vector drawing is composed of geometric shapes unlike bitmaps whhich work with pixels. <br /><a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/">SVG</a> (Scalable Vector Graphics) is the technology for vector graphics in HTML 5. It has the following basic items:
</p>

<ul>
  <li>
    Rectangle
  </li>
  <li>
    Circle
  </li>
  <li>
    Ellipse
  </li>
  <li>
    Line
  </li>
  <li>
    Polyline
  </li>
  <li>
    Polygon
  </li>
  <li>
    Path (with control system: MoveTo, LineTo, …)
  </li>
</ul>

<p>
  Silverlight uses the classes inherited from the base class Shape to define the basic geometric shapes:
</p>

<ul>
  <li>
    Rectangle
  </li>
  <li>
    Ellipse
  </li>
  <li>
    Line
  </li>
  <li>
    Polyline
  </li>
  <li>
    Polygon
  </li>
  <li>
    Path (with control system: MoveTo, LineTo, …)
  </li>
</ul>

<p>
  As we can see, in terms of options it is a <strong>draw</strong>. The two systems provide a very similar transformation system based on matrices. We will look at performance to try to differentiate our competitors. To do this we will develop a small application that will handle circles (or rounded ellipses) and paths (which we will build out of two Bezier curves).
</p>

<table border="0" cellspacing="0" cellpadding="2" width="820">
  <tr>
    <td valign="top" width="410">
      <p align="center">
        <strong>HTML 5</strong>
      </p>
    </td>

    <td valign="top" width="410">
      <p align="center">
        <strong>Silverlight 5</strong>
      </p>
    </td>
  </tr>

  <tr>
    <td valign="top" width="410">
      <p id="svgPerf">
        &#160;
      </p>

      <p style="width: 70px; height: 30px; cursor: pointer; text-decoration: underline" id="launchSVG">
        Launch
      </p>

      <p>
        <svg id="svgRoot" xmlns="https://www.w3.org/2000/svg" height="400" width="400"><defs><clippath id="c1_1"><rect height="400" width="400" y="0" x="0"></rect></clippath></defs><g id="group" clip-path="url(#c1_1)"><path style="fill: #4444ff; stroke: #4444ff; stroke-width: 2" id="svgPath" d="M0 0 L400 0 L400 200 C 350 150 250 150 200 200 C 150 250 50 250 0 200 Z"></path></g></svg></td> 

        <td valign="top" width="410">
        </td></tr> </tbody> </table> 

        <p>
          For HTML 5:
        </p>

        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:9f91399a-8c1c-41f1-b2b8-4a7b5a20212e" class="wlWriterSmartContent">
          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
            <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
              HTML 5
            </div>

            <div style="background: #ddd; max-height: 500px; overflow: auto">
              <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                <li>
                  <span style="color: #0000ff"><!</span><span style="color: #800000">DOCTYPE</span> <span style="color: #ff0000">html</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff"><</span><span style="color: #800000">html</span> <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="https://www.w3.org/1999/xhtml"></span>
                </li>
                <li>
                  <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">p</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="svgPerf"></span>
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">p</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8217;launchSVG&#8217;</span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #ff0000">style</span><span style="color: #0000ff">="</span><span style="color: #ff0000">width</span><span style="color: #0000ff">: 70px; </span><span style="color: #ff0000">height</span><span style="color: #0000ff">: 30px; </span><span style="color: #ff0000">cursor</span><span style="color: #0000ff">: pointer; </span><span style="color: #ff0000">text-decoration</span><span style="color: #0000ff">: underline;"></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Launch
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">svg</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="400"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="400"</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="svgRoot"</span> <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="https://www.w3.org/2000/svg"></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">defs</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">clippath</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="c1_1"></span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">rect</span> <span style="color: #ff0000">x</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">y</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="400"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="400"/></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">clippath</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">defs</span><span style="color: #0000ff">></span>&#160;&#160;&#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">g</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="group"</span> <span style="color: #ff0000">clip-path</span><span style="color: #0000ff">="url(#c1_1)"></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">path</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="svgPath"</span> <span style="color: #ff0000">d</span><span style="color: #0000ff">="M0 0 L400 0 L400 200 C 350 150 250 150 200 200 C 150 250 50 250 0 200 Z"</span> <span style="color: #ff0000">style</span><span style="color: #0000ff">="</span><span style="color: #ff0000">fill</span><span style="color: #0000ff">:#4444FF;</span><span style="color: #ff0000">stroke</span><span style="color: #0000ff">:#4444FF;</span><span style="color: #ff0000">stroke-width</span><span style="color: #0000ff">:2"</span> <span style="color: #0000ff">/></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">g</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">svg</span><span style="color: #0000ff">></span>&#160;&#160;&#160;&#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">script</span> <span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span> <span style="color: #ff0000">src</span><span style="color: #0000ff">="svg.js"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  &#160; <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
                </li>
              </ol>
            </div></p>
          </div></p>
        </div>

        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:4a076e2b-3562-43ba-a081-0d29389932e7" class="wlWriterSmartContent">
          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
            <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
              Javascript
            </div>

            <div style="background: #ddd; max-height: 500px; overflow: auto">
              <ol style="padding-bottom: 0px; margin: 0px 0px 0px 3em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                <li>
                  <span style="color: #0000ff">var</span> alpha = 0;
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">var</span> particles = [];
                </li>
                <li>
                  <span style="color: #0000ff">var</span> radius = 20;
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  <span style="color: #0000ff">function</span> Particle() {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> x = 400 * Math.random();
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> y = 400 + radius;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> velocity = 4 * Math.random() + 0.5;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> opacity = 1.0;
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #006400">// Create visual element for the particle</span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> domNode = document.createElementNS(<span style="color: #800000">"https://www.w3.org/2000/svg"</span>, <span style="color: #800000">"circle"</span>);
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> group = document.getElementById(<span style="color: #800000">&#8216;group&#8217;</span>);
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; group.appendChild(domNode);
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #006400">// Set initial position to middle of screen</span>
                </li>
                <li>
                  &#160;&#160;&#160; domNode.setAttribute(<span style="color: #800000">"cx"</span>, x + radius);
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; domNode.setAttribute(<span style="color: #800000">"cy"</span>, y);
                </li>
                <li>
                  &#160;&#160;&#160; domNode.setAttribute(<span style="color: #800000">"r"</span>, radius);
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #006400">// Set colour of element</span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> chars = <span style="color: #800000">"0123456789abcdef"</span>;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> color = <span style="color: #800000">"#"</span>;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i = 0; i < 2; i++) {
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> rnd = Math.floor(16 * Math.random());
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; color += chars.charAt(rnd);
                </li>
                <li>
                  &#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; color += <span style="color: #800000">"0000"</span>;
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; domNode.setAttribute(<span style="color: #800000">"fill"</span>, color);
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">function</span> draw() {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; y -= velocity;
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">if</span> (y < -radius) {
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; x = 400 * Math.random();
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; y = 400 + radius;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; velocity = 4 * Math.random() + 0.5;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; domNode.setAttribute(<span style="color: #800000">"cx"</span>, x + radius);
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; opacity = y / 400.0;
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; domNode.setAttribute(<span style="color: #800000">"opacity"</span>, opacity);
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; domNode.setAttribute(<span style="color: #800000">"cy"</span>, y);
                </li>
                <li>
                  &#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">return</span> {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; draw: draw
                </li>
                <li>
                  &#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  }
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">var</span> previous = [];
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">function</span> computeFPS() {
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #006400">// FPS</span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">if</span> (previous.length > 60) {
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; previous.splice(0, 1);
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; }
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> start = (<span style="color: #0000ff">new</span> Date).getTime();
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; previous.push(start);
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> sum = 0;
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < previous.length &#8211; 1; index++) {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; sum += previous[index + 1] &#8211; previous[index];
                </li>
                <li>
                  &#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> diff = 1000.0 / (sum / previous.length);
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> result = document.querySelector(<span style="color: #800000">&#8216;#svgPerf&#8217;</span>);
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; result.innerHTML = diff.toFixed() + <span style="color: #800000">&#8216; fps&#8217;</span>;
                </li>
                <li style="background: #f3f3f3">
                  }
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">function</span> animateSVG() {
                </li>
                <li>
                  &#160;&#160;&#160; computeFPS();
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #006400">// SVG</span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> h1 = (200 + 20 * Math.cos(alpha)).toFixed();
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> h2 = (200 &#8211; 20 * Math.cos(alpha)).toFixed();
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; svgPath.setAttribute(<span style="color: #800000">"d"</span>, <span style="color: #800000">"M0 0 L400 0 L400 200 C 350 "</span> + h2 + <span style="color: #800000">" 250 "</span> + h2 + <span style="color: #800000">" 200 200 C 150 "</span> + h1 + <span style="color: #800000">" 50 "</span> + h1 + <span style="color: #800000">" 0 200 Z"</span>);
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> particle <span style="color: #0000ff">in</span> particles) {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; particles[particle].draw();
                </li>
                <li>
                  &#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; alpha += 0.05;
                </li>
                <li style="background: #f3f3f3">
                  }
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">var</span> intervalID;
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">function</span> stopSVG() {
                </li>
                <li>
                  &#160;&#160;&#160; launchSVG.innerHTML = <span style="color: #800000">"Launch"</span>;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; window.clearInterval(intervalID);
                </li>
                <li>
                  &#160;&#160;&#160; launchSVG.onclick = startSVG;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; previous = [];
                </li>
                <li>
                  }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  <span style="color: #0000ff">function</span> startSVG() {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; launchSVG.innerHTML = <span style="color: #800000">"Stop"</span>;
                </li>
                <li>
                  &#160;&#160;&#160; launchSVG.onclick = stopSVG;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i = 0; i < 100; i++) {
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; particles.push(<span style="color: #0000ff">new</span> Particle());
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; }
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; intervalID = window.setInterval(<span style="color: #800000">"animateSVG()"</span>, 17);
                </li>
                <li>
                  }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  <span style="color: #0000ff">var</span> launchSVG = document.getElementById(<span style="color: #800000">&#8216;launchSVG&#8217;</span>);
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">var</span> svgPath = document.getElementById(<span style="color: #800000">&#8216;svgPath&#8217;</span>);
                </li>
                <li>
                  launchSVG.onclick = startSVG;
                </li>
              </ol>
            </div></p>
          </div></p>
        </div>

        <p>
          For Silverlight 5 :
        </p>

        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:4d16a2fb-21d3-4bbd-bb4e-344ff3077804" class="wlWriterSmartContent">
          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
            <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
              XAML
            </div>

            <div style="background: #ddd; max-height: 500px; overflow: auto">
              <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                <li>
                  <span style="color: #0000ff"><</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #a31515">&#160;</span><span style="color: #0000ff"><</span><span style="color: #a31515">Grid.RowDefinitions</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515">&#160;</span><span style="color: #0000ff"><</span><span style="color: #a31515">RowDefinition</span><span style="color: #ff0000"> Height</span><span style="color: #0000ff">="60"/></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515">&#160;</span><span style="color: #0000ff"><</span><span style="color: #a31515">RowDefinition</span><span style="color: #0000ff">/></span>
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #a31515">&#160;</span><span style="color: #0000ff"></</span><span style="color: #a31515">Grid.RowDefinitions</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #a31515">&#160;</span><span style="color: #0000ff"><</span><span style="color: #a31515">StackPanel</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515">&#160;</span><span style="color: #0000ff"><</span><span style="color: #a31515">TextBlock</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="fps"/></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Button</span><span style="color: #ff0000"> Content</span><span style="color: #0000ff">="Launch"</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="launchButton"</span><span style="color: #ff0000"> Click</span><span style="color: #0000ff">="launchButton_Click"</span><span style="color: #ff0000"> Width</span><span style="color: #0000ff">="70"</span><span style="color: #ff0000"> Height</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> HorizontalAlignment</span><span style="color: #0000ff">="Left"/></span>
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">StackPanel</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Grid</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="LayoutRoot"</span><span style="color: #ff0000"> Grid.Row</span><span style="color: #0000ff">="1"></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Grid.Clip</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">RectangleGeometry</span><span style="color: #ff0000"> Rect</span><span style="color: #0000ff">="0 0 400 400"></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">RectangleGeometry</span><span style="color: #0000ff">></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Grid.Clip</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Path</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="path"</span><span style="color: #ff0000"> Data</span><span style="color: #0000ff">="M0 0 L400 0 L400 200 C 350 150 250 150 200 200 C 150 250 50 250 0 200 Z"</span><span style="color: #ff0000"> Fill</span><span style="color: #0000ff">="#4444FF"</span><span style="color: #ff0000"> Stroke</span><span style="color: #0000ff">="#4444FF"</span> <span style="color: #ff0000">StrokeThickness</span><span style="color: #0000ff">="2"/></span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">></span>
                </li>
                <li>
                  <span style="color: #0000ff"></</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">></span>
                </li>
              </ol>
            </div></p>
          </div></p>
        </div>

        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:d9807d8e-74a1-4850-994e-863f1dd77fed" class="wlWriterSmartContent">
          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
            <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
              MainPage.xaml.cs
            </div>

            <div style="background: #ddd; max-height: 500px; overflow: auto">
              <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                <li>
                  <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">List</span><<span style="color: #2b91af">Particle</span>> particules = <span style="color: #0000ff">new</span> <span style="color: #2b91af">List</span><<span style="color: #2b91af">Particle</span>>();
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #2b91af">DispatcherTimer</span> timer;
                </li>
                <li>
                  <span style="color: #0000ff">double</span> alpha;
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">List</span><<span style="color: #2b91af">DateTime</span>> previous = <span style="color: #0000ff">new</span> <span style="color: #2b91af">List</span><<span style="color: #2b91af">DateTime</span>>();
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  <span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> Page_Loaded(<span style="color: #0000ff">object</span> sender, <span style="color: #2b91af">RoutedEventArgs</span> e)
                </li>
                <li>
                  {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> index = 0; index < 100; index++)
                </li>
                <li>
                  &#160;&#160;&#160; {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; particules.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">Particle</span>(LayoutRoot));
                </li>
                <li>
                  &#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; timer = <span style="color: #0000ff">new</span> <span style="color: #2b91af">DispatcherTimer</span> { Interval = <span style="color: #2b91af">TimeSpan</span>.FromMilliseconds(10) };
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; timer.Tick += (s, evt) =>
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; previous.Add(<span style="color: #2b91af">DateTime</span>.Now);
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">double</span> sum = 0;
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> index = 0; index < previous.Count &#8211; 1; index++)
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; sum += previous[index + 1].Subtract(previous[index]).TotalMilliseconds;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; sum /= previous.Count;
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; fps.Text = <span style="color: #0000ff">string</span>.Format(<span style="color: #a31515">"{0:0} fps"</span>, 1000.0 / sum);
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> h1 = (<span style="color: #0000ff">int</span>)(200 + 20 * <span style="color: #2b91af">Math</span>.Cos(alpha));
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> h2 = (<span style="color: #0000ff">int</span>)(200 &#8211; 20 * <span style="color: #2b91af">Math</span>.Cos(alpha));
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #2b91af">PathFigure</span> pathFigure = <span style="color: #0000ff">new</span> <span style="color: #2b91af">PathFigure</span> { StartPoint = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(0, 0) };
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.Segments.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">LineSegment</span> { Point = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(400, 0) });
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.Segments.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">LineSegment</span> { Point = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(400, 200) });
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.Segments.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">BezierSegment</span> { Point1 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(350, h2), Point2 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(250, h2), Point3 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(200, 200) });
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.Segments.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">BezierSegment</span> { Point1 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(150, h1), Point2 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(50, h1), Point3 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(0, 200) });
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.IsClosed = <span style="color: #0000ff">true</span>;
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #2b91af">PathGeometry</span> pathGeometry = <span style="color: #0000ff">new</span> <span style="color: #2b91af">PathGeometry</span>();
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pathGeometry.Figures.Add(pathFigure);
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; path.Data = pathGeometry;
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">foreach</span> (<span style="color: #0000ff">var</span> part <span style="color: #0000ff">in</span> particules)
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; part.Update();
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; alpha += 0.05;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; };
                </li>
                <li>
                  }
                </li>
              </ol>
            </div></p>
          </div></p>
        </div>

        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:4bde19e6-5aa1-40e4-82e9-3197be33f365" class="wlWriterSmartContent">
          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
            <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
              Particle.cs
            </div>

            <div style="background: #ddd; max-height: 500px; overflow: auto">
              <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                <li>
                  <span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">Particle</span>
                </li>
                <li style="background: #f3f3f3">
                  {
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #0000ff">double</span> Velocity { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #2b91af">Ellipse</span> Ellipse { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; }
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">TranslateTransform</span> translate;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">static</span> <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">Random</span> random = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Random</span>();
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">const</span> <span style="color: #0000ff">double</span> Radius = 20;
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">public</span> Particle(<span style="color: #2b91af">Grid</span> parent)
                </li>
                <li>
                  &#160;&#160;&#160; {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">byte</span> red = (<span style="color: #0000ff">byte</span>)random.Next(256);
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Ellipse</span>
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Width = Radius * 2,
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Height = Radius * 2,
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Fill = <span style="color: #0000ff">new</span> <span style="color: #2b91af">SolidColorBrush</span>(<span style="color: #0000ff">new</span> <span style="color: #2b91af">Color{</span>A= 255, B = 0, G = 0, R = red})
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; };
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; translate = <span style="color: #0000ff">new</span> <span style="color: #2b91af">TranslateTransform</span>();
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.RenderTransformOrigin = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(0.5, 0.5);
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.HorizontalAlignment = <span style="color: #2b91af">HorizontalAlignment</span>.Left;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.VerticalAlignment = <span style="color: #2b91af">VerticalAlignment</span>.Top;
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Spawn();
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.RenderTransform = translate;
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; parent.Children.Add(Ellipse);
                </li>
                <li>
                  &#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160; <span style="color: #0000ff">void</span> Spawn()
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; {
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; translate.X = 400 * random.NextDouble();
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; translate.Y = 400 + Radius;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Velocity = 4 * random.NextDouble() + 0.5;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; }
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; <span style="color: #0000ff">internal</span> <span style="color: #0000ff">void</span> Update()
                </li>
                <li>
                  &#160;&#160;&#160; {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; translate.Y -= Velocity;
                </li>
                <li>
                  &#160;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">if</span> (translate.Y < -Radius)
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Spawn();
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                </li>
                <li style="background: #f3f3f3">
                  &#160;
                </li>
                <li>
                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.Opacity = translate.Y / 400.0;
                </li>
                <li style="background: #f3f3f3">
                  &#160;&#160;&#160; }
                </li>
                <li>
                  }
                </li>
              </ol>
            </div></p>
          </div></p>
        </div>

        <p>
          The result on my computer is:
        </p>

        <table border="1" cellspacing="0" cellpadding="2" width="368">
          <tr>
            <td valign="top" width="210">
              <p align="center">
                <strong>System</strong>
              </p>
            </td>

            <td valign="top" width="156">
              <p align="center">
                <strong>FPS</strong>
              </p>
            </td>
          </tr>

          <tr>
            <td valign="top" width="228">
              <em>Silverlight 5</em>
            </td>

            <td valign="top" width="163">
              <p align="center">
                <em><span style="text-decoration: underline">63</span></em>
              </p>
            </td>
          </tr>

          <tr>
            <td valign="top" width="231">
              Chrome 12
            </td>

            <td valign="top" width="167">
              <p align="center">
                <span style="text-decoration: underline"><em>60</em></span>
              </p>
            </td>
          </tr>

          <tr>
            <td valign="top" width="229">
              IE 10 PP1
            </td>

            <td valign="top" width="170">
              <blockquote>
                <p align="center">
                  50
                </p>
              </blockquote>
            </td>
          </tr>

          <tr>
            <td valign="top" width="227">
              IE 9
            </td>

            <td valign="top" width="172">
              <blockquote>
                <p align="center">
                  50
                </p>
              </blockquote>
            </td>
          </tr>

          <tr>
            <td valign="top" width="227">
              Firefox 4
            </td>

            <td valign="top" width="172">
              <p align="center">
                50
              </p>
            </td>
          </tr>

          <tr>
            <td valign="top" width="227">
              Opera 11
            </td>

            <td valign="top" width="172">
              <p align="center">
                Do not work
              </p>
            </td>
          </tr>

          <tr>
            <td valign="top" width="227">
              Safari 5
            </td>

            <td valign="top" width="172">
              <p align="center">
                Do not work
              </p>
            </td>
          </tr>
        </table>

        <p>
          This time it is impossible to differentiate the opponents. The Silverlight code may be cleaner and more pleasant to read but it is a very personal opinion that should not go in. So it&#8217;s a <strong>draw</strong>.
        </p>

        <h1>
          Canvas vs WriteableBitmap
        </h1>

        <p>
          Silverlight 5 and HTML 5 both offer the opportunity to work on 2D surfaces at the pixel level directly. In HTML 5 this surface is called a canvas and we talk about WriteableBitmap in Silverlight 5.
        </p>

        <h2>
          Access to the pixels
        </h2>

        <p>
          The two surfaces are both capable of drawing basic shapes (like SVG / Shape) but mostly they allow direct access to their contents as <strong>RGBA</strong> (in HTML 5 we handle 4 integers per color) or <strong>ARGB</strong> (Silverlight handle 1 integer for each color with each element occupying 8 bits). <br />One can already note that the way to manipulate the pixels of Silverlight is more efficient since it only uses a single integer against four for HTML 5. <br />Again, the features are similar, we will again compare performance to name a winner. For this we will develop an effect that has been around since early technological demos on Amiga or Atari ST computers: the <strong>fire effect</strong>! It is achieved by applying a vertical blur (upward) while generating red color dots on the bottom of the image. In addition we generated flame under the mouse:
        </p>

        <table border="0" cellspacing="0" cellpadding="2" width="820">
          <tr>
            <td valign="top" width="410">
              <p align="center">
                <strong>HTML 5</strong>
              </p>
            </td>

            <td valign="top" width="410">
              <p align="center">
                <strong>Silverlight 5</strong>
              </p>
            </td>
          </tr>

          <tr>
            <td valign="top" width="410">
              <p id="fpsCanvas">
                &#160;
              </p>

              <p style="width: 70px; height: 30px; cursor: pointer; text-decoration: underline" id="launchCanvas">
                Launch
              </p>

              <p>
                <canvas id="canvas" height="200" width="300">Canvas not supported 🙁 </canvas></td> 

                <td valign="top" width="410">
                </td></tr> </tbody> </table> 

                <p>
                  For HTML 5:
                </p>

                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:5be436bc-4c21-42c2-b9a1-139c55b1f627" class="wlWriterSmartContent">
                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                    <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
                      HTML 5
                    </div>

                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                        <li>
                          <span style="color: #0000ff"><</span><span style="color: #800000">p</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="fpsCanvas"></span>
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                        </li>
                        <li>
                          <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">p</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8217;launchCanvas&#8217;</span> <span style="color: #ff0000">style</span><span style="color: #0000ff">="</span><span style="color: #ff0000">width</span><span style="color: #0000ff">: 70px; </span><span style="color: #ff0000">height</span><span style="color: #0000ff">: 30px; </span><span style="color: #ff0000">cursor</span><span style="color: #0000ff">: pointer; </span><span style="color: #ff0000">text-decoration</span><span style="color: #0000ff">: underline;"></span>
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; Launch
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                        </li>
                        <li>
                          <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff"><</span><span style="color: #800000">canvas</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="canvas"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="300"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="200"></span>
                        </li>
                        <li>
                          &#160;&#160;&#160; Canvas not supported 🙁
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff"></</span><span style="color: #800000">canvas</span><span style="color: #0000ff">></span>
                        </li>
                      </ol>
                    </div></p>
                  </div></p>
                </div>

                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:47df6e67-c3b7-47cb-badf-d32df6d03d2f" class="wlWriterSmartContent">
                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                    <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
                      Javascript
                    </div>

                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 3em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                        <li>
                          <span style="color: #0000ff">var</span> context;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">var</span> canvasWidth;
                        </li>
                        <li>
                          <span style="color: #0000ff">var</span> canvasHeight;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">var</span> blurSpeed = 0.04;
                        </li>
                        <li>
                          <span style="color: #0000ff">var</span> flamesCount = 50;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">var</span> flamesWidth = 10;
                        </li>
                        <li>
                          <span style="color: #0000ff">var</span> launchCanvas;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          <span style="color: #0000ff">function</span> putPixel(x, y) {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> clipX = Math.max(0, x &#8211; 4);
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> clipY = Math.max(0, y &#8211; 4);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> imageData = context.getImageData(clipX, clipY, 8, 8);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> pixels = imageData.data;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < pixels.length; index += 4) {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; pixels[index] = 255;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; pixels[index + 1] = 0;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; pixels[index + 2] = 0;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; pixels[index + 3] = 255;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; context.putImageData(imageData, x, y);
                        </li>
                        <li>
                          }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          <span style="color: #0000ff">var</span> previous = [];
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          <span style="color: #0000ff">function</span> computeFPSCanvas() {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #006400">// FPS</span>
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">if</span> (previous.length > 60) {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; previous.splice(0, 1);
                        </li>
                        <li>
                          &#160;&#160;&#160; }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> start = (<span style="color: #0000ff">new</span> Date).getTime();
                        </li>
                        <li>
                          &#160;&#160;&#160; previous.push(start);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> sum = 0;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < previous.length &#8211; 1; index++) {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; sum += previous[index + 1] &#8211; previous[index];
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> diff = 1000.0 / (sum / previous.length);
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> fpsCanvas = document.getElementById(<span style="color: #800000">&#8216;fpsCanvas&#8217;</span>);
                        </li>
                        <li>
                          &#160;&#160;&#160; fpsCanvas.innerHTML = diff.toFixed() + <span style="color: #800000">&#8216; fps&#8217;</span>;
                        </li>
                        <li style="background: #f3f3f3">
                          }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">function</span> blur() {
                        </li>
                        <li>
                          &#160;&#160;&#160; computeFPSCanvas();
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> pixels = imageData.data;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #006400">// Generate root flames</span>
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> line = (canvasHeight &#8211; 1) * canvasWidth;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> flameID = 0; flameID < flamesCount; flameID++) {
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> red = 150 + 95 * Math.random();
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> green = 50 * Math.random();
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> x = Math.min(canvasWidth &#8211; flamesWidth, Math.random() * canvasWidth) | 0;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < flamesWidth; index++) {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> base = (x + index + line) * 4;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pixels[base] = red;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pixels[base + 1] = green;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #006400">// Vertical blur</span>
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> x = 0; x < canvasWidth; x++) {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> y = 0; y < canvasHeight; y++) {
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> medR = 0;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> medG = 0;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> samplesCount = 0;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < 4; index++) {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> scanY = y + index;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">if</span> (scanY >= canvasHeight)
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">continue</span>;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> linearPosition = (x + scanY * canvasWidth) * 4;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; medR += pixels[linearPosition];
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; medG += pixels[linearPosition + 1];
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; samplesCount += 1 + (1 &#8211; index / 4) * blurSpeed;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; medR /= samplesCount;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; medG /= samplesCount;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> base = (x + y * canvasWidth) * 4;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pixels[base] = medR;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pixels[base + 1] = medG;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;&#160;&#160; }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; context.putImageData(imageData, 0, 0);
                        </li>
                        <li style="background: #f3f3f3">
                          }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">function</span> onMouseMove(e) {
                        </li>
                        <li>
                          &#160;&#160;&#160; putPixel(e.offsetX, e.offsetY);
                        </li>
                        <li style="background: #f3f3f3">
                          }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">var</span> intervalCanvasID;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">function</span> stopCanvas() {
                        </li>
                        <li>
                          &#160;&#160;&#160; launchCanvas.innerHTML = <span style="color: #800000">"Launch"</span>;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; window.clearInterval(intervalCanvasID);
                        </li>
                        <li>
                          &#160;&#160;&#160; launchCanvas.onclick = startCanvas;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; previous = [];
                        </li>
                        <li>
                          }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          <span style="color: #0000ff">function</span> startCanvas() {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; launchCanvas.innerHTML = <span style="color: #800000">"Stop"</span>;
                        </li>
                        <li>
                          &#160;&#160;&#160; launchCanvas.onclick = stopCanvas;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; intervalCanvasID = window.setInterval(<span style="color: #800000">"blur()"</span>, 17);
                        </li>
                        <li style="background: #f3f3f3">
                          }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">var</span> canvas = document.getElementById(<span style="color: #800000">&#8216;canvas&#8217;</span>);
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          context = canvas.getContext(<span style="color: #800000">&#8216;2d&#8217;</span>);
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          canvas.onmousemove = onMouseMove;
                        </li>
                        <li>
                          canvasWidth = canvas.width;
                        </li>
                        <li style="background: #f3f3f3">
                          canvasHeight = canvas.height;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          context.fillStyle = <span style="color: #800000">"rgb(0,0,0)"</span>;
                        </li>
                        <li>
                          context.fillRect(0, 0, canvasWidth, canvasHeight);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          launchCanvas = document.getElementById(<span style="color: #800000">&#8216;launchCanvas&#8217;</span>);
                        </li>
                        <li style="background: #f3f3f3">
                          launchCanvas.onclick = startCanvas;
                        </li>
                      </ol>
                    </div></p>
                  </div></p>
                </div>

                <p>
                  For Silverlight 5:
                </p>

                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:45af0b27-a274-455d-be64-ac2e939fc672" class="wlWriterSmartContent">
                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                    <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
                      XAML
                    </div>

                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                        <li>
                          <span style="color: #0000ff"><</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">></span>
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Grid.RowDefinitions</span><span style="color: #0000ff">></span>
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">RowDefinition</span><span style="color: #ff0000"> Height</span><span style="color: #0000ff">="60"/></span>
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">RowDefinition</span><span style="color: #0000ff">/></span>
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Grid.RowDefinitions</span><span style="color: #0000ff">></span>
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">StackPanel</span><span style="color: #0000ff">></span>
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">TextBlock</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="fps"/></span>
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Button</span><span style="color: #ff0000"> Content</span><span style="color: #0000ff">="Launch"</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="launchButton"</span><span style="color: #ff0000"> Click</span><span style="color: #0000ff">="launchButton_Click"</span><span style="color: #ff0000"> Width</span><span style="color: #0000ff">="70"</span><span style="color: #ff0000"> Height</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> HorizontalAlignment</span><span style="color: #0000ff">="Left"/></span>
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">StackPanel</span><span style="color: #0000ff">></span>
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Image</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="renderImage"</span><span style="color: #ff0000"> MouseMove</span><span style="color: #0000ff">="renderImage_MouseMove"</span><span style="color: #ff0000"> Grid.Row</span><span style="color: #0000ff">="1"</span><span style="color: #ff0000"> Stretch</span><span style="color: #0000ff">="Fill"/></span>
                        </li>
                        <li>
                          <span style="color: #0000ff"></</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">></span>
                        </li>
                      </ol>
                    </div></p>
                  </div></p>
                </div>

                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:055f65e3-1a41-47f1-ab52-412663363c7c" class="wlWriterSmartContent">
                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                    <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
                      MainPage.xaml.cs
                    </div>

                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 3em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                        <li>
                          <span style="color: #2b91af">DispatcherTimer</span> timer;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">List</span><<span style="color: #2b91af">DateTime</span>> previous = <span style="color: #0000ff">new</span> <span style="color: #2b91af">List</span><<span style="color: #2b91af">DateTime</span>>();
                        </li>
                        <li>
                          <span style="color: #2b91af">WriteableBitmap</span> writeableBitmap;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">const</span> <span style="color: #0000ff">float</span> blurSpeed = 0.04f;
                        </li>
                        <li>
                          <span style="color: #0000ff">const</span> <span style="color: #0000ff">int</span> flamesWidth = 10;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">const</span> <span style="color: #0000ff">int</span> flamesCount = 50;
                        </li>
                        <li>
                          <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">Random</span> random = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Random</span>();
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          <span style="color: #0000ff">public</span> MainPage()
                        </li>
                        <li style="background: #f3f3f3">
                          {
                        </li>
                        <li>
                          &#160;&#160;&#160; InitializeComponent();
                        </li>
                        <li style="background: #f3f3f3">
                          }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> UserControl_Loaded(<span style="color: #0000ff">object</span> sender, <span style="color: #2b91af">RoutedEventArgs</span> e)
                        </li>
                        <li>
                          {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; writeableBitmap = <span style="color: #0000ff">new</span> <span style="color: #2b91af">WriteableBitmap</span>(300, 200);
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; writeableBitmap.Render(<span style="color: #0000ff">new</span> <span style="color: #2b91af">Rectangle</span> { Width = 300, Height = 200, Fill = <span style="color: #0000ff">new</span> <span style="color: #2b91af">SolidColorBrush</span>(<span style="color: #2b91af">Colors</span>.Black) }, <span style="color: #0000ff">null</span>);
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; renderImage.Source = writeableBitmap;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; writeableBitmap.Invalidate();
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; timer = <span style="color: #0000ff">new</span> <span style="color: #2b91af">DispatcherTimer</span> { Interval = <span style="color: #2b91af">TimeSpan</span>.FromMilliseconds(10) };
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; timer.Tick += (s, evt) =>
                        </li>
                        <li>
                          &#160;&#160;&#160; {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #008000">// FPS</span>
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; previous.Add(<span style="color: #2b91af">DateTime</span>.Now);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">double</span> sum = 0;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> index = 0; index < previous.Count &#8211; 1; index++)
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; sum += previous[index + 1].Subtract(previous[index]).TotalMilliseconds;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; sum /= previous.Count;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; fps.Text = <span style="color: #0000ff">string</span>.Format(<span style="color: #a31515">"{0:0} fps"</span>, 1000.0 / sum);
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #008000">// Flames</span>
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> line = (writeableBitmap.PixelHeight &#8211; 1) * writeableBitmap.PixelWidth;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> flameID = 0; flameID < flamesCount; flameID++)
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> red = 150 + random.Next(96);
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> green = random.Next(51);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> x = <span style="color: #2b91af">Math</span>.Min(writeableBitmap.PixelWidth &#8211; flamesWidth, random.Next(writeableBitmap.PixelWidth));
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < flamesWidth; index++)
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> basePosition = (x + index + line);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; writeableBitmap.Pixels[basePosition] = GetColor(red, green, 0);
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #008000">// Vertical blur</span>
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> x = 0; x < writeableBitmap.PixelWidth; x++)
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> y = 0; y < writeableBitmap.PixelHeight; y++)
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> medR = 0;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> medG = 0;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">float</span> samplesCount = 0;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < 4; index++)
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> scanY = y + index;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">if</span> (scanY >= writeableBitmap.PixelHeight)
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">continue</span>;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> linearPosition = (x + scanY * writeableBitmap.PixelWidth);
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">int</span> red, green;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; ExtractColor(writeableBitmap.Pixels[linearPosition], <span style="color: #0000ff">out</span> red, <span style="color: #0000ff">out</span> green);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; medR += red;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; medG += green;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; samplesCount += 1 + (1 &#8211; index / 4) * blurSpeed;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; medR = (<span style="color: #0000ff">int</span>)(medR / samplesCount);
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; medG = (<span style="color: #0000ff">int</span>)(medG / samplesCount);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> basePosition = (x + y * writeableBitmap.PixelWidth);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; writeableBitmap.Pixels[basePosition] = GetColor(medR, medG, 0);
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; writeableBitmap.Invalidate();
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; };
                        </li>
                        <li>
                          }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          <span style="color: #0000ff">void</span> launchButton_Click(<span style="color: #0000ff">object</span> sender, <span style="color: #2b91af">RoutedEventArgs</span> e)
                        </li>
                        <li style="background: #f3f3f3">
                          {
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">if</span> (launchButton.Content.ToString() == <span style="color: #a31515">"Launch"</span>)
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; previous.Clear();
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; timer.Start();
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; launchButton.Content = <span style="color: #a31515">"Stop"</span>;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; }
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #0000ff">else</span>
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; {
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; launchButton.Content = <span style="color: #a31515">"Launch"</span>;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; timer.Stop();
                        </li>
                        <li>
                          &#160;&#160;&#160; }
                        </li>
                        <li style="background: #f3f3f3">
                          }
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">static</span> <span style="color: #0000ff">int</span> GetColor(<span style="color: #0000ff">int</span> red, <span style="color: #0000ff">int</span> green, <span style="color: #0000ff">int</span> blue)
                        </li>
                        <li>
                          {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">return</span> (255 << 24) + (red << 16) + (green << 8) + blue;
                        </li>
                        <li>
                          }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          <span style="color: #0000ff">static</span> <span style="color: #0000ff">void</span> ExtractColor(<span style="color: #0000ff">int</span> value, <span style="color: #0000ff">out</span> <span style="color: #0000ff">int</span> red, <span style="color: #0000ff">out</span> <span style="color: #0000ff">int</span> green)
                        </li>
                        <li style="background: #f3f3f3">
                          {
                        </li>
                        <li>
                          &#160;&#160;&#160; red = ((value & 0x00FF0000) >> 16);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; green = ((value & 0x0000FF00) >> 8);
                        </li>
                        <li>
                          }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          <span style="color: #0000ff">void</span> PutPixel(<span style="color: #0000ff">int</span> x, <span style="color: #0000ff">int</span> y)
                        </li>
                        <li>
                          {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">int</span> red = GetColor(255, 0, 0);
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> clipX = <span style="color: #2b91af">Math</span>.Max(0, x &#8211; 4); clipX <= x + 4 && clipX < writeableBitmap.PixelWidth; clipX++)
                        </li>
                        <li>
                          &#160;&#160;&#160; {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> clipY = <span style="color: #2b91af">Math</span>.Max(0, y &#8211; 4); clipY <= y + 4 && clipY < writeableBitmap.PixelHeight; clipY++)
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> basePosition = (clipX + clipY * writeableBitmap.PixelWidth);
                        </li>
                        <li>
                          &#160;
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; writeableBitmap.Pixels[basePosition] = red;
                        </li>
                        <li>
                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;&#160;&#160; }
                        </li>
                        <li>
                          }
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          <span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> renderImage_MouseMove(<span style="color: #0000ff">object</span> sender, System.Windows.Input.<span style="color: #2b91af">MouseEventArgs</span> e)
                        </li>
                        <li style="background: #f3f3f3">
                          {
                        </li>
                        <li>
                          &#160;&#160;&#160; <span style="color: #2b91af">Point</span> location = e.GetPosition(renderImage);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; PutPixel((<span style="color: #0000ff">int</span>)location.X, (<span style="color: #0000ff">int</span>)location.Y);
                        </li>
                        <li style="background: #f3f3f3">
                          &#160;
                        </li>
                        <li>
                          &#160;&#160;&#160; writeableBitmap.Invalidate();
                        </li>
                        <li style="background: #f3f3f3">
                          }
                        </li>
                      </ol>
                    </div></p>
                  </div></p>
                </div>

                <p>
                  The result on my computer is
                </p>

                <table border="1" cellspacing="0" cellpadding="2" width="368">
                  <tr>
                    <td valign="top" width="210">
                      <p align="center">
                        <strong>System</strong>
                      </p>
                    </td>

                    <td valign="top" width="156">
                      <p align="center">
                        <strong>FPS</strong>
                      </p>
                    </td>
                  </tr>

                  <tr>
                    <td valign="top" width="228">
                      <em>Silverlight 5</em>
                    </td>

                    <td valign="top" width="163">
                      <p align="center">
                        <em><span style="text-decoration: underline">80</span></em>
                      </p>
                    </td>
                  </tr>

                  <tr>
                    <td valign="top" width="231">
                      Chrome 12
                    </td>

                    <td valign="top" width="167">
                      <p align="center">
                        30
                      </p>
                    </td>
                  </tr>

                  <tr>
                    <td valign="top" width="229">
                      IE 10 PP1
                    </td>

                    <td valign="top" width="170">
                      <blockquote>
                        <p align="center">
                          33
                        </p>
                      </blockquote>
                    </td>
                  </tr>

                  <tr>
                    <td valign="top" width="227">
                      IE 9
                    </td>

                    <td valign="top" width="172">
                      <blockquote>
                        <p align="center">
                          33
                        </p>
                      </blockquote>
                    </td>
                  </tr>

                  <tr>
                    <td valign="top" width="227">
                      Firefox 4
                    </td>

                    <td valign="top" width="172">
                      <p align="center">
                        <span style="text-decoration: underline"><em>60</em></span>
                      </p>
                    </td>
                  </tr>

                  <tr>
                    <td valign="top" width="227">
                      Opera 11
                    </td>

                    <td valign="top" width="172">
                      <p align="center">
                        47
                      </p>
                    </td>
                  </tr>

                  <tr>
                    <td valign="top" width="227">
                      Safari 5
                    </td>

                    <td valign="top" width="172">
                      <p align="center">
                        30 (very jaggy)
                      </p>
                    </td>
                  </tr>
                </table>

                <p>
                  Silverlight gets the best result thanks to its pixel storage system. However, due to their architecture, browsers can not overcome the 60 frames per second barrier. We can therefore conclude that we have a <strong>draw</strong> here (as at least one browser gets the same performance level as Silverlight).
                </p>

                <h2>
                  Drawing shapes
                </h2>

                <p>
                  To be complete, however we must also test the performance of the shape drawing mechanism. We&#8217;ll play the demo used for the SVG vs Shapes comparison but this time we will drawing the shapes in our 2D surfaces:
                </p>

                <table border="0" cellspacing="0" cellpadding="2" width="820">
                  <tr>
                    <td valign="top" width="410">
                      <p align="center">
                        <strong>HTML 5</strong>
                      </p>
                    </td>

                    <td valign="top" width="410">
                      <p align="center">
                        <strong>Silverlight</strong>
                      </p>
                    </td>
                  </tr>

                  <tr>
                    <td valign="top" width="410">
                      <p id="fpsShapesCanvas">
                        &#160;
                      </p>

                      <p style="width: 70px; height: 30px; cursor: pointer; text-decoration: underline" id="launchShapesCanvas">
                        Launch
                      </p>

                      <p>
                        <canvas id="shapescanvas" height="400" width="400">Canvas not supported 🙁 </canvas></td> 

                        <td valign="top" width="410">
                        </td></tr> </tbody> </table> 

                        <p>
                          For HTML 5:
                        </p>

                        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:27d346ba-dded-4ba5-9380-2fc0cff38326" class="wlWriterSmartContent">
                          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                            <div style="background: #ddd; max-height: 500px; overflow: auto">
                              <ol style="padding-bottom: 0px; margin: 0px 0px 0px 3em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                <li>
                                  <span style="color: #0000ff">var</span> shapescontext;
                                </li>
                                <li style="background: #f3f3f3">
                                  <span style="color: #0000ff">var</span> launchShapesCanvas;
                                </li>
                                <li>
                                  <span style="color: #0000ff">var</span> radius = 20;
                                </li>
                                <li style="background: #f3f3f3">
                                  <span style="color: #0000ff">var</span> shapescanvas;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  <span style="color: #0000ff">var</span> shapesPrevious = [];
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  <span style="color: #0000ff">var</span> shapesparticles = [];
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  <span style="color: #0000ff">var</span> shapesAlpha = 0;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  <span style="color: #0000ff">function</span> computeFPSShapesCanvas() {
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #006400">// FPS</span>
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">if</span> (shapesPrevious.length > 60) {
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; shapesPrevious.splice(0, 1);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; }
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> start = (<span style="color: #0000ff">new</span> Date).getTime();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; shapesPrevious.push(start);
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> sum = 0;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < shapesPrevious.length &#8211; 1; index++) {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; sum += shapesPrevious[index + 1] &#8211; shapesPrevious[index];
                                </li>
                                <li>
                                  &#160;&#160;&#160; }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> diff = 1000.0 / (sum / shapesPrevious.length);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> fpsCanvas = document.getElementById(<span style="color: #800000">&#8216;fpsShapesCanvas&#8217;</span>);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; fpsCanvas.innerHTML = diff.toFixed() + <span style="color: #800000">&#8216; fps&#8217;</span>;
                                </li>
                                <li>
                                  }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  <span style="color: #0000ff">function</span> animateShapesCanvas() {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; computeFPSShapesCanvas();
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #006400">// Clear</span>
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapescontext.fillStyle = <span style="color: #800000">"rgb(255,255,255)"</span>;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; shapescontext.fillRect(0, 0, shapescanvas.width, shapescanvas.height);
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #006400">// Path</span>
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> h1 = (200 + 20 * Math.cos(shapesAlpha)).toFixed();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> h2 = (200 &#8211; 20 * Math.cos(shapesAlpha)).toFixed();
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapesAlpha += 0.05;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapescontext.beginPath();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; shapescontext.moveTo(0, 0);
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapescontext.lineTo(400, 0);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; shapescontext.lineTo(400, 200);
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapescontext.bezierCurveTo(350, h2, 250, h2, 200, 200);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; shapescontext.bezierCurveTo(150, h1, 50, h1, 0, 200);
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapescontext.closePath();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapescontext.fillStyle = <span style="color: #800000">"rgb(0, 0, 255)"</span>;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; shapescontext.fill();
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #006400">// Particles</span>
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapescontext.save();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> particle <span style="color: #0000ff">in</span> shapesparticles) {
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160; shapesparticles[particle].draw();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160; }
                                </li>
                                <li>
                                  &#160;&#160; shapescontext.restore();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  <span style="color: #0000ff">var</span> intervalShapesCanvasID;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  <span style="color: #0000ff">function</span> stopShapesCanvas() {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; launchShapesCanvas.innerHTML = <span style="color: #800000">"Launch"</span>;
                                </li>
                                <li>
                                  &#160;&#160;&#160; window.clearInterval(intervalShapesCanvasID);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; launchShapesCanvas.onclick = startShapesCanvas;
                                </li>
                                <li>
                                  &#160;&#160;&#160; shapesPrevious = [];
                                </li>
                                <li style="background: #f3f3f3">
                                  }
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  <span style="color: #0000ff">function</span> startShapesCanvas() {
                                </li>
                                <li>
                                  &#160;&#160;&#160; launchShapesCanvas.innerHTML = <span style="color: #800000">"Stop"</span>;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; launchShapesCanvas.onclick = stopShapesCanvas;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; intervalShapesCanvasID = window.setInterval(<span style="color: #800000">"animateShapesCanvas()"</span>, 17);
                                </li>
                                <li>
                                  }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  <span style="color: #0000ff">function</span> ShapeParticle() {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> x = 400 * Math.random();
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> y = 400 + radius;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> velocity = 4 * Math.random() + 0.5;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> opacity = 1.0;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #006400">// Set colour of element</span>
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">var</span> color = <span style="color: #800000">"rgb("</span> + Math.floor(255 * Math.random()) + <span style="color: #800000">", 0, 0)"</span>;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">function</span> draw() {
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; y -= velocity;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">if</span> (y < -radius) {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; x = 400 * Math.random();
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; y = 400 + radius;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; velocity = 4 * Math.random() + 0.5;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">return</span>;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; opacity = Math.max(0, y / 400.0);
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; shapescontext.globalAlpha = opacity;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; shapescontext.beginPath();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; shapescontext.arc(x, y, radius, 0, 2 * Math.PI, <span style="color: #0000ff">false</span>);
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; shapescontext.closePath();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; shapescontext.fillStyle = color;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; shapescontext.fill();
                                </li>
                                <li>
                                  &#160;&#160;&#160; }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">return</span> {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; draw: draw
                                </li>
                                <li>
                                  &#160;&#160;&#160; }
                                </li>
                                <li style="background: #f3f3f3">
                                  }
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  shapescanvas = document.getElementById(<span style="color: #800000">&#8216;shapescanvas&#8217;</span>);
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  shapescontext = shapescanvas.getContext(<span style="color: #800000">&#8216;2d&#8217;</span>);
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  launchShapesCanvas = document.getElementById(<span style="color: #800000">&#8216;launchShapesCanvas&#8217;</span>);
                                </li>
                                <li>
                                  launchShapesCanvas.onclick = startShapesCanvas;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i = 0; i < 100; i++) {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; shapesparticles.push(<span style="color: #0000ff">new</span> ShapeParticle());
                                </li>
                                <li>
                                  }
                                </li>
                              </ol>
                            </div></p>
                          </div></p>
                        </div>

                        <p>
                          For Silverlight:
                        </p>

                        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e1467d4d-37ba-4714-a62e-e482668a3615" class="wlWriterSmartContent">
                          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                            <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
                              Particule.cs
                            </div>

                            <div style="background: #ddd; max-height: 500px; overflow: auto">
                              <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                <li>
                                  <span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> <span style="color: #2b91af">Particle</span>
                                </li>
                                <li style="background: #f3f3f3">
                                  {
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #0000ff">double</span> Velocity { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">public</span> <span style="color: #2b91af">Ellipse</span> Ellipse { <span style="color: #0000ff">get</span>; <span style="color: #0000ff">set</span>; }
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">TranslateTransform</span> translate;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">static</span> <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">Random</span> random = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Random</span>();
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">WriteableBitmap</span> root;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">const</span> <span style="color: #0000ff">double</span> Radius = 20;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">public</span> Particle(<span style="color: #2b91af">WriteableBitmap</span> root)
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; {
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">this</span>.root = root;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">byte</span> red = (<span style="color: #0000ff">byte</span>)random.Next(256);
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Ellipse</span>
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Width = Radius * 2,
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Height = Radius * 2,
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Fill = <span style="color: #0000ff">new</span> <span style="color: #2b91af">SolidColorBrush</span>(<span style="color: #0000ff">new</span> <span style="color: #2b91af">Color{</span>A= 255, B = 0, G = 0, R = red})
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; };
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; translate = <span style="color: #0000ff">new</span> <span style="color: #2b91af">TranslateTransform</span>();
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.RenderTransformOrigin = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(0.5, 0.5);
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.HorizontalAlignment = <span style="color: #2b91af">HorizontalAlignment</span>.Left;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.VerticalAlignment = <span style="color: #2b91af">VerticalAlignment</span>.Top;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Spawn();
                                </li>
                                <li>
                                  &#160;&#160;&#160; }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">void</span> Spawn()
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; {
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; translate.X = 400 * random.NextDouble();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; translate.Y = 400 + Radius;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Velocity = 4 * random.NextDouble() + 0.5;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; }
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; <span style="color: #0000ff">internal</span> <span style="color: #0000ff">void</span> Update()
                                </li>
                                <li>
                                  &#160;&#160;&#160; {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; translate.Y -= Velocity;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">if</span> (translate.Y < -Radius)
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Spawn();
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; Ellipse.Opacity = translate.Y / 400.0;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; root.Render(Ellipse, translate);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; }
                                </li>
                              </ol>
                            </div></p>
                          </div></p>
                        </div>

                        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:1c0de69d-9827-4bc2-aab8-224c7eaf854d" class="wlWriterSmartContent">
                          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                            <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
                              MainPage.xaml.cs
                            </div>

                            <div style="background: #ddd; max-height: 500px; overflow: auto">
                              <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                <li>
                                  <span style="color: #0000ff">void</span> UserControl_Loaded(<span style="color: #0000ff">object</span> sender, <span style="color: #2b91af">RoutedEventArgs</span> e)
                                </li>
                                <li style="background: #f3f3f3">
                                  {
                                </li>
                                <li>
                                  &#160;&#160;&#160; writeableBitmap = <span style="color: #0000ff">new</span> <span style="color: #2b91af">WriteableBitmap</span>(400, 400);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; renderImage.Source = writeableBitmap;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; path = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Path</span>();
                                </li>
                                <li>
                                  &#160;&#160;&#160; path.Fill = <span style="color: #0000ff">new</span> <span style="color: #2b91af">SolidColorBrush</span>(<span style="color: #2b91af">Colors</span>.Blue);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> index = 0; index < 100; index++)
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; {
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; particules.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">Particle</span>(writeableBitmap));
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; }
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160; timer = <span style="color: #0000ff">new</span> <span style="color: #2b91af">DispatcherTimer</span> { Interval = <span style="color: #2b91af">TimeSpan</span>.FromMilliseconds(10) };
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160; timer.Tick += (s, evt) =>
                                </li>
                                <li>
                                  &#160;&#160;&#160; {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #008000">// FPS</span>
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; previous.Add(<span style="color: #2b91af">DateTime</span>.Now);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">double</span> sum = 0;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> index = 0; index < previous.Count &#8211; 1; index++)
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; sum += previous[index + 1].Subtract(previous[index]).TotalMilliseconds;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; sum /= previous.Count;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; fps.Text = <span style="color: #0000ff">string</span>.Format(<span style="color: #a31515">"{0:0} fps"</span>, 1000.0 / sum);
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #008000">// Render</span>
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; writeableBitmap.Render(<span style="color: #0000ff">new</span> <span style="color: #2b91af">Rectangle</span> { Width = 400, Height = 400, Fill = <span style="color: #0000ff">new</span> <span style="color: #2b91af">SolidColorBrush</span>(<span style="color: #2b91af">Colors</span>.White) }, <span style="color: #0000ff">null</span>);
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> h1 = (<span style="color: #0000ff">int</span>)(200 + 20 * <span style="color: #2b91af">Math</span>.Cos(alpha));
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">var</span> h2 = (<span style="color: #0000ff">int</span>)(200 &#8211; 20 * <span style="color: #2b91af">Math</span>.Cos(alpha));
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #2b91af">PathFigure</span> pathFigure = <span style="color: #0000ff">new</span> <span style="color: #2b91af">PathFigure</span> { StartPoint = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(0, 0) };
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.Segments.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">LineSegment</span> { Point = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(400, 0) });
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.Segments.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">LineSegment</span> { Point = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(400, 200) });
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.Segments.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">BezierSegment</span> { Point1 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(350, h2), Point2 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(250, h2), Point3 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(200, 200) });
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.Segments.Add(<span style="color: #0000ff">new</span> <span style="color: #2b91af">BezierSegment</span> { Point1 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(150, h1), Point2 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(50, h1), Point3 = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Point</span>(0, 200) });
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; pathFigure.IsClosed = <span style="color: #0000ff">true</span>;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #2b91af">PathGeometry</span> pathGeometry = <span style="color: #0000ff">new</span> <span style="color: #2b91af">PathGeometry</span>();
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; pathGeometry.Figures.Add(pathFigure);
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; path.Data = pathGeometry;
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; writeableBitmap.Render(path, <span style="color: #0000ff">null</span>);
                                </li>
                                <li>
                                  &#160;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">foreach</span> (<span style="color: #0000ff">var</span> part <span style="color: #0000ff">in</span> particules)
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; part.Update();
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; }
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;
                                </li>
                                <li>
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; alpha += 0.05;
                                </li>
                                <li style="background: #f3f3f3">
                                  &#160;&#160;&#160;&#160;&#160;&#160;&#160; writeableBitmap.Invalidate();
                                </li>
                                <li>
                                  &#160;&#160;&#160; };
                                </li>
                                <li style="background: #f3f3f3">
                                  }
                                </li>
                              </ol>
                            </div></p>
                          </div></p>
                        </div>

                        <p>
                          The result on my computer is :
                        </p>

                        <table border="1" cellspacing="0" cellpadding="2" width="368">
                          <tr>
                            <td valign="top" width="210">
                              <p align="center">
                                <strong>System</strong>
                              </p>
                            </td>

                            <td valign="top" width="156">
                              <p align="center">
                                <strong>FPS</strong>
                              </p>
                            </td>
                          </tr>

                          <tr>
                            <td valign="top" width="228">
                              <em>Silverlight 5</em>
                            </td>

                            <td valign="top" width="163">
                              <p align="center">
                                <em><span style="text-decoration: underline">60</span></em>
                              </p>
                            </td>
                          </tr>

                          <tr>
                            <td valign="top" width="231">
                              Chrome 12
                            </td>

                            <td valign="top" width="167">
                              <p align="center">
                                <span style="text-decoration: underline"><em>60</em></span>
                              </p>
                            </td>
                          </tr>

                          <tr>
                            <td valign="top" width="229">
                              IE 10 PP1
                            </td>

                            <td valign="top" width="170">
                              <blockquote>
                                <p align="center">
                                  <em><span style="text-decoration: underline">60</span></em>
                                </p>
                              </blockquote>
                            </td>
                          </tr>

                          <tr>
                            <td valign="top" width="227">
                              IE 9
                            </td>

                            <td valign="top" width="172">
                              <blockquote>
                                <p align="center">
                                  <em><span style="text-decoration: underline">60</span></em>
                                </p>
                              </blockquote>
                            </td>
                          </tr>

                          <tr>
                            <td valign="top" width="227">
                              Firefox 4
                            </td>

                            <td valign="top" width="172">
                              <p align="center">
                                <em><span style="text-decoration: underline">60</span></em>
                              </p>
                            </td>
                          </tr>

                          <tr>
                            <td valign="top" width="227">
                              Opera 11
                            </td>

                            <td valign="top" width="172">
                              <p align="center">
                                <em><span style="text-decoration: underline">60</span></em>
                              </p>
                            </td>
                          </tr>

                          <tr>
                            <td valign="top" width="227">
                              Safari 5
                            </td>

                            <td valign="top" width="172">
                              <p align="center">
                                <em><span style="text-decoration: underline">60</span></em>
                              </p>
                            </td>
                          </tr>
                        </table>

                        <p>
                          Nothing more to say, both in terms of performance and features both competitors are at the same level.
                        </p>

                        <h1>
                          Brushes
                        </h1>

                        <p>
                          Brushes are used to fill interface elements with a color, gradient or a pattern. <br />In HTML5, it is possible to use them with CSS or directly in a canvas or SVG. It is also possible to use images or videos as brushes. <br />In Silverlight 5, we have the same concept with the added ability of using other controls rendered as a base texture (VisualBrush).
                        </p>

                        <p>
                          Here is an example:
                        </p>

                        <table border="0" cellspacing="0" cellpadding="2" width="820">
                          <tr>
                            <td valign="top" width="410">
                              <p align="center">
                                <strong>HTML 5</strong>
                              </p>
                            </td>

                            <td valign="top" width="410">
                              <p align="center">
                                <strong>Silverlight 5</strong>
                              </p>
                            </td>
                          </tr>

                          <tr>
                            <td valign="top" width="410">
                              <p>
                                Full color :
                              </p>

                              <p>
                                <svg xmlns="https://www.w3.org/2000/svg" height="100" width="100"><rect height="100" width="100" y="0" x="0" fill="#ff00ff"></rect></svg>
                              </p>

                              <p>
                                Radial gradient :
                              </p>

                              <p>
                                <svg xmlns="https://www.w3.org/2000/svg" height="100" width="100"><radialgradient id="radial" cx="50%" cy="50%" r="50%" gradientunits="userSpaceOnUse"><stop stop-color="#FFFFFF" offset="0"></stop><stop stop-color="#470A45" offset="1"></stop></radialgradient><rect height="100" width="100" y="0" x="0" fill="url(#radial)"></rect></svg>
                              </p>

                              <p>
                                Linear gradient :
                              </p>

                              <p>
                                <svg xmlns="https://www.w3.org/2000/svg" height="100" width="100"><lineargradient id="linear" gradientunits="userSpaceOnUse"><stop stop-color="#FFFFFF" offset="0"></stop><stop stop-color="#470A45" offset="1"></stop></lineargradient><rect height="100" width="100" y="0" x="0" fill="url(#linear)"></rect></svg></td> 

                                <td valign="top" width="410">
                                </td></tr> </tbody> </table> 

                                <p>
                                  For HTML 5:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:8a04b881-21be-44aa-ad17-f8defb62c7ca" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>Couleur pleine :<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"><</span><span style="color: #800000">svg</span> <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="https://www.w3.org/2000/svg"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="100"></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">rect</span> <span style="color: #ff0000">x</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">y</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">fill</span><span style="color: #0000ff">="#ff00ff"</span> <span style="color: #0000ff">/></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"></</span><span style="color: #800000">svg</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>Radial gradient :<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"><</span><span style="color: #800000">svg</span> <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="https://www.w3.org/2000/svg"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="100"></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">radialGradient</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="radial"</span> <span style="color: #ff0000">gradientUnits</span><span style="color: #0000ff">="userSpaceOnUse"</span> <span style="color: #ff0000">cx</span><span style="color: #0000ff">="50%"</span> <span style="color: #ff0000">cy</span><span style="color: #0000ff">="50%"</span> <span style="color: #ff0000">r</span><span style="color: #0000ff">="50%"></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">stop</span> <span style="color: #ff0000">stop-color</span><span style="color: #0000ff">="#FFFFFF"</span> <span style="color: #ff0000">offset</span><span style="color: #0000ff">="0"/></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">stop</span> <span style="color: #ff0000">stop-color</span><span style="color: #0000ff">="#470A45"</span> <span style="color: #ff0000">offset</span><span style="color: #0000ff">="1"/></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">radialGradient</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">rect</span> <span style="color: #ff0000">x</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">y</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">fill</span><span style="color: #0000ff">="url(#radial)"</span> <span style="color: #0000ff">/></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"></</span><span style="color: #800000">svg</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>Linear gradient :<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"><</span><span style="color: #800000">svg</span> <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="https://www.w3.org/2000/svg"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="100"></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">linearGradient</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="linear"</span> <span style="color: #ff0000">gradientUnits</span><span style="color: #0000ff">="userSpaceOnUse"></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">stop</span> <span style="color: #ff0000">stop-color</span><span style="color: #0000ff">="#FFFFFF"</span> <span style="color: #ff0000">offset</span><span style="color: #0000ff">="0"/></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">stop</span> <span style="color: #ff0000">stop-color</span><span style="color: #0000ff">="#470A45"</span> <span style="color: #ff0000">offset</span><span style="color: #0000ff">="1"/></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">linearGradient</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">rect</span> <span style="color: #ff0000">x</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">y</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">="100"</span> <span style="color: #ff0000">fill</span><span style="color: #0000ff">="url(#linear)"</span> <span style="color: #0000ff">/></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"></</span><span style="color: #800000">svg</span><span style="color: #0000ff">></span>
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  For Silverlight :
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:8fd60cf6-f6f5-4581-a611-6b8ff4bfb54b" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #a31515">StackPanel</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">TextBlock</span><span style="color: #ff0000"> Text</span><span style="color: #0000ff">="Couleur pleine:"</span><span style="color: #ff0000"> Margin</span><span style="color: #0000ff">="0,10"></</span><span style="color: #a31515">TextBlock</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Rectangle</span><span style="color: #ff0000"> Width</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> Height</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> Fill</span><span style="color: #0000ff">="#ff00ff"</span><span style="color: #ff0000"> HorizontalAlignment</span><span style="color: #0000ff">="Left"/></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">TextBlock</span><span style="color: #ff0000"> Text</span><span style="color: #0000ff">="Radial gradient:"</span><span style="color: #ff0000"> Margin</span><span style="color: #0000ff">="0,10"></</span><span style="color: #a31515">TextBlock</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Rectangle</span><span style="color: #ff0000"> Width</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> Height</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> HorizontalAlignment</span><span style="color: #0000ff">="Left"></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Rectangle.Fill</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">RadialGradientBrush</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">GradientStop</span><span style="color: #ff0000"> Color</span><span style="color: #0000ff">="#FFFFFF"</span><span style="color: #ff0000"> Offset</span><span style="color: #0000ff">="0"></</span><span style="color: #a31515">GradientStop</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">GradientStop</span><span style="color: #ff0000"> Color</span><span style="color: #0000ff">="#470A45"</span><span style="color: #ff0000"> Offset</span><span style="color: #0000ff">="1"></</span><span style="color: #a31515">GradientStop</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">RadialGradientBrush</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Rectangle.Fill</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Rectangle</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">TextBlock</span><span style="color: #ff0000"> Text</span><span style="color: #0000ff">="Linear gradient:"</span><span style="color: #ff0000"> Margin</span><span style="color: #0000ff">="0,10"></</span><span style="color: #a31515">TextBlock</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Rectangle</span><span style="color: #ff0000"> Width</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> Height</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> HorizontalAlignment</span><span style="color: #0000ff">="Left"></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Rectangle.Fill</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">LinearGradientBrush</span><span style="color: #ff0000"> StartPoint</span><span style="color: #0000ff">="0, 0"</span><span style="color: #ff0000"> EndPoint</span><span style="color: #0000ff">="1, 0"></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">GradientStop</span><span style="color: #ff0000"> Color</span><span style="color: #0000ff">="#FFFFFF"</span><span style="color: #ff0000"> Offset</span><span style="color: #0000ff">="0"></</span><span style="color: #a31515">GradientStop</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">GradientStop</span><span style="color: #ff0000"> Color</span><span style="color: #0000ff">="#470A45"</span><span style="color: #ff0000"> Offset</span><span style="color: #0000ff">="1"></</span><span style="color: #a31515">GradientStop</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">LinearGradientBrush</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Rectangle.Fill</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Rectangle</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"></</span><span style="color: #a31515">StackPanel</span><span style="color: #0000ff">></span>
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  For once the syntax is very similar. We can therefore consider it a <strong>draw</strong>.
                                </p>

                                <h1>
                                  Controls
                                </h1>

                                <p>
                                  In Silverlight 5, it is both possible to define ones own controls from scratch or by aggregation (UserControl and CustomControl). It is also possible to inherit from the basic controls or even modify the associated templates to modify their appearance. In brief, <strong>Silverlight is extremely powerful for dealing with user interface</strong>.
                                </p>

                                <p>
                                  HTML 5 does not offer any integrated solution for creating controls except basic copy/pasting of code. This is a big minus for business projects looking at industrializing their developments. We are far from the plethora of controls that can be simply referenced in Silverlight.
                                </p>

                                <p>
                                  Note that HTML 5 introduces the concept of validation checks (required, etc.) and drag&#8217;n&#8217;drop.
                                </p>

                                <h1>
                                  Layout
                                </h1>

                                <p>
                                  Layout management (layout of the GUI and customization) is very <strong>rich</strong> in Silverlight. It is possible to position objects:
                                </p>

                                <ul>
                                  <li>
                                    In a grid with cell size in absolute, relative or even adaptable to the content
                                  </li>
                                  <li>
                                    With vertical or horizontal stacking in a StackPanel
                                  </li>
                                  <li>
                                    In a canvas that enables positioning through absolute coordinates
                                  </li>
                                  <li>
                                    With the margins and alignments
                                  </li>
                                  <li>
                                    With overflows exposed by the new control RichTexboxOverflow
                                  </li>
                                </ul>

                                <p>
                                  This system may be extended to infinity by adding usercontrols which can define their own layout. A good example can be found in the <a href="https://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html">Silverlight Toolkit</a>, which adds for example a WrapPanel.
                                </p>

                                <p>
                                  HTML5 also provides <strong>complete</strong> solutions for layout management:
                                </p>

                                <ul>
                                  <li>
                                    Grids with <table> <td> <tr>
                                  </li>
                                  <li>
                                    New system for placing and sizing grids: <a href="https://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html">Alignment Grid CSS Level 3</a>. You will find that this mechanism is almost exactly identical to that of Silverlight (With good reason, as it is a Microsoft proposed specification)
                                  </li>
                                  <li>
                                    System integrated with CSS layout (absolute or relative placement, absolute or relative size, etc..)
                                  </li>
                                  <li>
                                    New <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">CSS3 Flexbox</a> system for which you can see a demo right <a href="https://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html">here</a> (if your browser supports it). This specification allows management&#160; of alignments and placement relative to boxes (yes that&#8217;s exactly the same thing for XUL and it&#8217;s not a coincidence <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Sourire" src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/5164.wlEmoticon-smile_62DC511A.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/5164.wlEmoticon_2D00_smile_5F00_62DC511A.png" />)
                                  </li>
                                  <li>
                                    <a href="https://www.w3.org/TR/css3-multicol/">CSS3 Multi-column layout</a> which is a rendering system with multi-column (example <a href="https://ie.microsoft.com/testdrive/HTML5/TweetColumns/Default.html">here</a>).
                                  </li>
                                  <li>
                                    <a href="https://www.w3.org/TR/css3-mediaqueries/">CSS3 Media Queries</a> that define different layouts based on display sizes with an example <a href="https://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html">here</a> (besides Samuel Blanchard&#8217;s had fun doing the same thing in Silverlight <a href="https://blog.naviso.fr/wordpress/?p=776">here</a>).
                                  </li>
                                </ul>

                                <p>
                                  Layout technologies in HTML5 are not well supported by all browsers (the always repeating story of standards under development) but based purely on functionality, this is a fairly <strong>even </strong>game since the two competitors are able to produce easily adaptable and scalable layouts.
                                </p>

                                <h1>
                                  Databinding
                                </h1>

                                <p>
                                  A key feature of Silverlight is the databinding that opens the door to design patterns such as <a href="https://msdn.microsoft.com/fr-fr/magazine/dd419663.aspx">MVVM</a> (Model / View / ViewModel) that can implement effective and modern architectures.
                                </p>

                                <p>
                                  The databinding also enable defining dynamic interfaces without any line of code.
                                </p>

                                <p>
                                  In the land of HTML 5 <strong>there is nothing</strong>. This implies that HTML 5 is heading more towards the production of consumer websites where Silverlight 5 aims at business line type of applications.
                                </p>

                                <p>
                                  To do databinding in HTML 5, we will necessarily go through Javascript code to manually assign values ​​to controls and subscribe to events to retrieve the changed data. Some libraries exist (for example, you can use jQuery or <a href="https://knockoutjs.com/">Knockout</a>) but nothing as <strong>effective</strong> (in terms of implementation and performance) as Silverlight.
                                </p>

                                <h1>
                                  Threading : Web workers vs System.Threading
                                </h1>

                                <p>
                                  Silverlight 5 offers enhanced support for threading through the class System.Threading.Thread and even provides access to the thread pool.
                                </p>

                                <p>
                                  I have even recently published an article on porting the <a href="https://blogs.msdn.com/b/eternalcoding/archive/2011/05/16/tpl-build-your-own-tpl-for-silverlight-wp7-and-xbox-360.aspx">Silverlight Task Parallel Library</a>.
                                </p>

                                <p>
                                  HTML5 has the concept of Web Workers, threads that are independent from the main thread (the one that displays and manipulates the DOM).
                                </p>

                                <p>
                                  These workers are actually totally compartmentalized and so they communicate with the main thread via a messaging mechanism. This prevents having to worry about keeping critical sections on shared data since there is no shared data. Thus the workers can not access the DOM:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e9e5bc1c-10f7-44ce-8b63-b4536e497eac" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
                                      Main script
                                    </div>

                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff">var</span> worker = <span style="color: #0000ff">new</span> Worker(<span style="color: #800000">"webworker.js"</span>);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          worker.onmessage = <span style="color: #0000ff">function</span>(e) {&#160;&#160;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; alert(e.data);
                                        </li>
                                        <li>
                                          };
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          worker.onerror = <span style="color: #0000ff">function</span> (e) {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; alert(<span style="color: #800000">"Erreur: "</span> + e.message);
                                        </li>
                                        <li>
                                          };
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          worker.postMessage(<span style="color: #800000">"David"</span>);
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:90b9a636-5a8e-4295-bbb2-29988b64fa3b" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="padding-bottom: 2px; padding-left: 5px; padding-right: 5px; font-family: verdana, tahoma, arial, sans-serif; background: #000080; color: #fff; font-weight: bold; padding-top: 2px">
                                      Worker
                                    </div>

                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          self.onmessage = <span style="color: #0000ff">function</span> (e) {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; self.postMessage(e.data.toUpperCase());
                                        </li>
                                        <li>
                                          }
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  Communication with Workers passes through strings, it is necessary to serialize objects to JSON which can be painful.
                                </p>

                                <p>
                                  The <a href="https://www.w3.org/TR/workers/">standard</a> is still evolving very rapidly and we cannot know what will be its final state. For example, it has recently adopted the concept of Shared Workers who can communicate with more scripts.
                                </p>

                                <p>
                                  Here is an example of raytracing engine in Javascript using the workers (if your browser supports them): <a href="https://nerget.com/rayjs-mt/rayjs.html">https://nerget.com/rayjs-mt/rayjs.html</a>
                                </p>

                                <p>
                                  For Silverlight, communication with other threads is done by calling methods and passing parameters (in fact, nothing special). There are many more tools to manage concurrency and timing such as ManualResetEvent, AutoResetEvent, Monitor, etc..
                                </p>

                                <p>
                                  You will find below an example of code that uses Silverlight ManualResetEvent to control a thread. It also show the use of the Dispatcher allowing the thread to execute code on the thread of the interface:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:18f656e6-756f-48d0-98dc-19d7a6d29f64" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff">readonly</span> <span style="color: #2b91af">ManualResetEvent</span> evt = <span style="color: #0000ff">new</span> <span style="color: #2b91af">ManualResetEvent</span>(<span style="color: #0000ff">false</span>);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff">readonly</span> <span style="color: #0000ff">string</span> textToTransform;
                                        </li>
                                        <li>
                                          &#160;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff">public</span> MainPage()
                                        </li>
                                        <li>
                                          {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; InitializeComponent();
                                        </li>
                                        <li>
                                          &#160;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #2b91af">Thread</span> thread = <span style="color: #0000ff">new</span> <span style="color: #2b91af">Thread</span>(DoJob);
                                        </li>
                                        <li>
                                          &#160;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; textToTransform = textBlock.Text;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; thread.Start();
                                        </li>
                                        <li style="background: #f3f3f3">
                                          }
                                        </li>
                                        <li>
                                          &#160;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff">void</span> DoJob()
                                        </li>
                                        <li>
                                          {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #0000ff">while</span> (<span style="color: #0000ff">true</span>)
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">string</span> result = textToTransform.ToUpper();
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; Dispatcher.BeginInvoke(() => textBlock.Text = result);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; evt.WaitOne();
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; }
                                        </li>
                                        <li style="background: #f3f3f3">
                                          }
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  As we can see, Silverlight <strong>outperforms</strong> Web Workers on potential and tools (again, thanks to Visual Studio which provides several debugging tools) but also in terms of control over the threads. The addition of future technologies such as Async Framework will add even more power to Silverlight.
                                </p>

                                <p>
                                  Obviously, the approach of Web workers (even if the standard is far from being done) is different from the conventional threading of Silverlight. It certainly helps to do simple threading but unfortunately it cannot cover all the needs of modern application development.
                                </p>

                                <h1>
                                  Animations
                                </h1>

                                <p>
                                  The Silverlight animation engine can easily manipulate control properties.
                                </p>

                                <p>
                                  These manipulations are done <strong>seamlessly</strong> by an autonomous system that can manage events on simple properties (double, integer, etc..) or complex properties (color, thickness, etc..). These activities are done by a storyboard which handles timing for us.
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a7f4b377-eac4-4a06-a7bc-7f14a0fa466a" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #a31515">Storyboard</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Key</span><span style="color: #0000ff">="monStoryboard"></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">DoubleAnimation</span><span style="color: #ff0000"> Duration</span><span style="color: #0000ff">="0:0:0.1"</span><span style="color: #ff0000"> To</span><span style="color: #0000ff">="1"</span><span style="color: #ff0000"> Storyboard.TargetProperty</span><span style="color: #0000ff">="Opacity"</span><span style="color: #ff0000"> Storyboard.TargetName</span><span style="color: #0000ff">="LayoutRoot"></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">DoubleAnimation.EasingFunction</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">BackEase</span><span style="color: #ff0000"> Amplitude</span><span style="color: #0000ff">="0.6"</span><span style="color: #ff0000"> EasingMode</span><span style="color: #0000ff">="EaseInOut"/></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">DoubleAnimation.EasingFunction</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">DoubleAnimation</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          <span style="color: #0000ff"></</span><span style="color: #a31515">Storyboard</span><span style="color: #0000ff">></span>
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  These animations can be created either in XAML or in code. As shown above, it is even possible to define functions to use non-linear animation.
                                </p>

                                <p>
                                  In HTML5, it is possible to use the setInterval and setTimeout to animate (manually) DOM elements:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:4b986e8b-c901-4900-a64d-3e4962cd0a27" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff">function</span> startCanvas() {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; launchCanvas.innerHTML = <span style="color: #800000">"Stop"</span>;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; launchCanvas.onclick = stopCanvas;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; intervalCanvasID = window.setInterval(<span style="color: #800000">"blur()"</span>, 17);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          }
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  Here, no special support by the system. It is up to us to manage everything. But, obviously, anything is possible.
                                </p>

                                <p>
                                  However a new technology has emerged (still poorly supported by browsers) to improve things: <a href="https://www.w3.org/TR/css3-animations/">CSS Animations Module Level 3</a>. <br />With this module, it is possible to animate the CSS styles with a very interesting statement:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:029df557-4c4f-42b6-897d-d3e3b2487294" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff">@keyframes</span> &#8216;anim01&#8217; {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; 0% {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160; <span style="color: #ff0000">left</span>: <span style="color: #0000ff">100px</span>;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; }
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; 40% {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160; <span style="color: #ff0000">left</span>: <span style="color: #0000ff">150px</span>;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; }
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; 60% {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160; <span style="color: #ff0000">left</span>: <span style="color: #0000ff">75px</span>;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; }
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; 100% {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160; <span style="color: #ff0000">left</span>: <span style="color: #0000ff">100px</span>;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; }
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160; }
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  In this animation, we decided to animate the attribute "left" by labelling key points of the animation. The system will subsequently change the attribute value over time.
                                </p>

                                <p>
                                  The assignment of this animation will be:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:fa454071-0a0e-4bcf-a012-9dca29ab926e" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #800000">div</span> {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #ff0000">animation-name</span>: <span style="color: #0000ff">&#8216;anim01&#8217;</span>;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #ff0000">animation-duration</span>: <span style="color: #0000ff">5s</span>;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #ff0000">animation-iteration-count</span>: <span style="color: #0000ff">10</span>;
                                        </li>
                                        <li>
                                          &#160; }
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  In Silverlight, it is possible to define functions to set the linearity (or not) of the animation. <br />In addition, HTML5 (actually CSS3) specification also includes <a href="https://www.w3.org/TR/2009/WD-css3-transitions-20090320/">CSS Transitions Module Level 3</a>, which allows you to define animations on a transition, i.e. when an attribute receives a new value:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:383795df-3df3-4339-b98c-5cd763a0de29" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #800000">div</span> {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #ff0000">transition-property</span>: <span style="color: #0000ff">opacity</span>;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #ff0000">transition-duration</span>: <span style="color: #0000ff">2s</span>;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160; }
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  In this example, when we change the opacity value, the system will gradually change the current value to the new value in 2 seconds. It is also possible to define how the animation will take place over the period (transition-timing-function).
                                </p>

                                <p>
                                  In Silverlight, we also have a system to manage these transitions: <a href="https://msdn.microsoft.com/fr-fr/library/system.windows.visualstatemanager(VS.95).aspx">VisualStateManager</a>. The latter cannot define the animations when changing the value of a variable, only when changing the state of a control:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:03f2c207-78c7-4f79-b178-b4b22c87ddf1" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #a31515">ControlTemplate</span><span style="color: #ff0000"> TargetType</span><span style="color: #0000ff">="Button"></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Grid</span><span style="color: #0000ff"> ></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">VisualStateManager.VisualStateGroups</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">VisualStateGroup</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="CommonStates"></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">VisualStateGroup.Transitions</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">VisualTransition</span><span style="color: #ff0000"> To</span><span style="color: #0000ff">="MouseOver"</span><span style="color: #ff0000"> GeneratedDuration</span><span style="color: #0000ff">="0:0:0.5"/></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">VisualStateGroup.Transitions</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">VisualState</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="Normal" /></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">VisualState</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="MouseOver"></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Storyboard</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">ColorAnimation</span><span style="color: #ff0000"> Storyboard.TargetName</span><span style="color: #0000ff">="ButtonBrush"</span><span style="color: #ff0000"> Storyboard.TargetProperty</span><span style="color: #0000ff">="Color"</span><span style="color: #ff0000"> To</span><span style="color: #0000ff">="Red" /></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Storyboard</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">VisualState</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">VisualStateGroup</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">VisualStateManager.VisualStateGroups</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">Grid.Background</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"><</span><span style="color: #a31515">SolidColorBrush</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="ButtonBrush"</span><span style="color: #ff0000"> Color</span><span style="color: #0000ff">="Green"/></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Grid.Background</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #a31515"></span><span style="color: #0000ff"></</span><span style="color: #a31515">Grid</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"></</span><span style="color: #a31515">ControlTemplate</span><span style="color: #0000ff">></span>
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  So here we animate the color of our button when the mouse is over it.
                                </p>

                                <p>
                                  Also note that Silverlight can launch animations when the value of a property changes (with some code).
                                </p>

                                <p>
                                  In conclusion, if we ignore the very low support (for now) of animations technologies in browsers, we can consider that both competitors are well equipped in terms of animations with quite similar philosophies.
                                </p>

                                <h1>
                                  Web requests & Web services
                                </h1>

                                <h2>
                                  Web requests
                                </h2>

                                <p>
                                  The Web Requests are requests made to a server from the client application code. They can query a remote resource without changing the user interface.
                                </p>

                                <p>
                                  Eventually the query result can be processed by the code to impact the user interface. <br />In HMTL5 (well, mostly in Javascript), it is possible to make <a href="https://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest</a>:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:364d803f-da7b-4bc9-aaec-a3c1b359c7fd" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff">function</span> write(data) {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> webrequestResult = document.getElementById(<span style="color: #800000">&#8216;webrequestResult&#8217;</span>);
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; webrequestResult.innerHTML = data;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          }
                                        </li>
                                        <li>
                                          &#160;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff">function</span> handler() {
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff">if</span> (<span style="color: #0000ff">this</span>.readyState == 4 && <span style="color: #0000ff">this</span>.status == 200) {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">if</span> (<span style="color: #0000ff">this</span>.responseXML != <span style="color: #0000ff">null</span>)
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; write(<span style="color: #0000ff">this</span>.responseXML.text);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #0000ff">else</span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; write(<span style="color: #0000ff">null</span>);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; } <span style="color: #0000ff">else</span> <span style="color: #0000ff">if</span> (<span style="color: #0000ff">this</span>.readyState == 4 && <span style="color: #0000ff">this</span>.status != 200) {&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; write(<span style="color: #800000">&#8216;Erreur&#8230;&#8217;</span>);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; }
                                        </li>
                                        <li>
                                          }
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          <span style="color: #0000ff">var</span> client = <span style="color: #0000ff">new</span> XMLHttpRequest();
                                        </li>
                                        <li style="background: #f3f3f3">
                                          client.onreadystatechange = handler;
                                        </li>
                                        <li>
                                          client.open(<span style="color: #800000">"GET"</span>, <span style="color: #800000">"https://www.catuhe.com/files/data.xml"</span>);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          client.send();
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  With this same system it is also possible to make HTTP POST.
                                </p>

                                <p>
                                  In Silverlight, we have two classes to do this kind of request: <a href="https://msdn.microsoft.com/en-us/library/system.net.httpwebrequest(v=VS.95).aspx">HttpWebRequest</a> (lower level) and <a href="https://msdn.microsoft.com/en-us/library/tt0f69eh(v=VS.95).aspx">WebClient</a> (high level):
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:34d39455-02db-48c9-9b5a-126fbff82449" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> UserControl_Loaded(<span style="color: #0000ff">object</span> sender, <span style="color: #2b91af">RoutedEventArgs</span> e)
                                        </li>
                                        <li style="background: #f3f3f3">
                                          {
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #2b91af">WebClient</span> webClient = <span style="color: #0000ff">new</span> <span style="color: #2b91af">WebClient</span>();
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; webClient.DownloadStringCompleted += (s, arg) =>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; result.Text = arg.Result;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; };
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; webClient.DownloadStringAsync(<span style="color: #0000ff">new</span> <span style="color: #2b91af">Uri</span>(<span style="color: #a31515">"https://www.catuhe.com/files/data.xml"</span>));
                                        </li>
                                        <li style="background: #f3f3f3">
                                          }
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  Note that we are not limited to download XML in Silverlight. Indeed, it is possible to send / receive byte arrays so we can transfer anything (in digital form obviously).
                                </p>

                                <h2>
                                  Web services
                                </h2>

                                <p>
                                  Regarding web services, Silverlight with Visual Studio allows us to make a simple [<em>Add Reference</em>]. It generates the local proxy to call a web service (WCF for example) using the HttpWebRequest.
                                </p>

                                <p>
                                  In Javascript, it is less easy because the tools are not (<strong>yet</strong>) available but it is still possible for example to use the <a href="https://www.codeproject.com/KB/aspnet/wcfinjavascript.aspx">AJAX</a> framework. Otherwise you will have to write your own queries and handle the protocol.
                                </p>

                                <p>
                                  We must therefore recognize that Web Services/WCF & Silverlight (thanks to its excellent <strong>integration</strong> with Visual Studio) offers a much easier implementation.
                                </p>

                                <h1>
                                  Media (Audio & Vidéo)
                                </h1>

                                <p>
                                  Silverlight 5 and HTML 5 both offer advanced support for audio and video. The main problem for HTML 5 is at the non-standard codecs (and the war between the H.264 and WebM). Thus, depending on the browser, we have to send a video in one format or another.
                                </p>

                                <p>
                                  However HTML 5 provides an elegant solution, with the possibility to define in a single <video> or <audio> tag several potential sources in order of preference:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e1e253af-e22a-4dff-af23-a4002c71d3a4" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #800000">video</span> <span style="color: #ff0000">controls</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">source</span> <span style="color: #ff0000">src</span><span style="color: #0000ff">="mavideo.mp4"</span> <span style="color: #ff0000">type</span><span style="color: #0000ff">="video/mp4"/></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">source</span> <span style="color: #ff0000">src</span><span style="color: #0000ff">="mavideo.webm"</span> <span style="color: #ff0000">type</span><span style="color: #0000ff">="video/webm"/></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; Unable to read the video&#8230;
                                        </li>
                                        <li>
                                          <span style="color: #0000ff"></</span><span style="color: #800000">video</span><span style="color: #0000ff">></span>
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  It is also possible to add a Silverlight after all the sources in case the browser does not support HTML 5.
                                </p>

                                <p>
                                  It is of course possible to manipulate audio and video via conventional controls such as Play / Pause / Stop / Seek. It is even possible to capture the video stream into an image that can be used elsewhere in the application.
                                </p>

                                <p>
                                  In Silverlight 5, there is no codecs war (the advantage of being a single decision maker). So as long as Silverlight is supported, we guarantee that our video works. So no need to encode multiple sources. In the same way (as in HTML 5) it is possible to manipulate the video via commands or use the video as a brush to another control.
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:d901b156-315b-4515-8bf5-bde0ed92dd5c" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #a31515">MediaElement</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="mediaelement"</span><span style="color: #ff0000"> Source</span><span style="color: #0000ff">="https://monserveur.com/video"</span><span style="color: #ff0000"> AutoPlay</span><span style="color: #0000ff">="True" /></span>
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  In addition, Silverlight 5 supports smooth streaming (broadcast stream that will adapt to the connection and the power of the client) through its associated control:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ef38547a-a877-444c-babe-992ab8a666f7" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #ff0000">SmoothStreamingMediaElement AutoPlay</span><span style="color: #0000ff">="True"</span><span style="color: #ff0000"> x</span><span style="color: #0000ff">:</span><span style="color: #ff0000">Name</span><span style="color: #0000ff">="SmoothPlayer"</span><span style="color: #ff0000"> SmoothStreamingSource</span><span style="color: #0000ff">="https://monserveur.com/flux.ism/Manifest" /></span>
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  Silverlight also supports the concept of DRM (<strong>Digital Rights Management</strong>) and can therefore deliver video protected by copyright as HTML 5 not provide the same functionality. Sites using HTML 5 will thus be limited to providing free of rights material.
                                </p>

                                <p>
                                  Again, both players are functionally well-equipped. However Silverlight supports additional services and is not subject to the codecs war. So it is a slight victory for Silverlight 5.
                                </p>

                                <h1>
                                  Isolated Storage
                                </h1>

                                <p>
                                  Silverlight 5 offers local data storage via the API Isolated Storage. The Isolated Storage is a file system accessible only by the application and/or the current user.
                                </p>

                                <p>
                                  Subsequently the use of this storage space is identical to that of a standard file system:
                                </p>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:9abf155f-fede-4c5e-b314-e8d631eabe9e" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff">using</span> (<span style="color: #0000ff">var</span> isostore = <span style="color: #2b91af">IsolatedStorageFile</span>.GetUserStoreForApplication())
                                        </li>
                                        <li style="background: #f3f3f3">
                                          {
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #2b91af">IsolatedStorageFileStream</span> stream = isostore.OpenFile(<span style="color: #a31515">"toto.txt"</span>, <span style="color: #2b91af">FileMode</span>.Open);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #0000ff">using</span> (<span style="color: #2b91af">StreamReader</span> reader = <span style="color: #0000ff">new</span> <span style="color: #2b91af">StreamReader</span>(stream))
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; {
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; reader.ReadToEnd();
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; }&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
                                        </li>
                                        <li style="background: #f3f3f3">
                                          }
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <p>
                                  In HTML 5, there are 2 main solutions for isolated storage:
                                </p>

                                <ul>
                                  <li>
                                    localStorage: This is a solution to save pairs of keys/values ​​for the long term (the data is retained after the browser is closed), accessible only by the current window object:
                                  </li>
                                </ul>

                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:c1c62fcf-beeb-4032-8e6c-39002219c7e0" class="wlWriterSmartContent">
                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                    <div style="background: #ddd; max-height: 500px; overflow: auto">
                                      <ol style="padding-bottom: 0px; margin: 0px 0px 0px 2.5em; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #0000ff"><</span><span style="color: #800000">div</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8217;userName&#8217;></span>
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li>
                                          <span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;&#160;&#160; <span style="color: #0000ff">if</span> (localStorage[<span style="color: #800000">&#8216;user&#8217;</span>] == undefined)
                                        </li>
                                        <li>
                                          &#160;&#160;&#160;&#160;&#160;&#160;&#160; localStorage.setItem(<span style="color: #800000">&#8216;user&#8217;</span>, <span style="color: #800000">&#8216;David&#8217;</span>);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; <span style="color: #0000ff">var</span> div = document.getElementById(<span style="color: #800000">&#8216;userName&#8217;</span>);
                                        </li>
                                        <li style="background: #f3f3f3">
                                          &#160;
                                        </li>
                                        <li>
                                          &#160;&#160;&#160; div.innerHTML = localStorage[<span style="color: #800000">&#8216;user&#8217;</span>];
                                        </li>
                                        <li style="background: #f3f3f3">
                                          <span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
                                        </li>
                                      </ol>
                                    </div></p>
                                  </div></p>
                                </div>

                                <ul>
                                  <li>
                                    sessionStorage: this can store key/value pair for the lifetime of the current session and is only accessible by the current window object
                                  </li>
                                </ul>

                                <p>
                                  As we can see the two competitors offer solutions philosophically identical but with different implementations: Silverlight with a file system orientation and HTML 5 storage with a structured orientation.
                                </p>

                                <h1>
                                  WebSockets vs System.Net.Sockets
                                </h1>

                                <p>
                                  HTML 5 introduces the concept of <a href="https://dev.w3.org/html5/websockets/">WebSocket</a> for <strong>network</strong> communication. It is an evolution of TCP/HTTP that will allow continuous bi-directional connections between the client and the server. Indeed, the HTTP protocol is stateless and not connected.Therefore it is difficult to use for transient or push type communications.
                                </p>

                                <p>
                                  Currently WebSocket has an issue: they are changing continuously (for example because of some <a href="https://www.adambarth.com/papers/2011/huang-chen-barth-rescorla-jackson.pdf">recently discovered</a> safety problems). So the browsers either: do not support the standard, block the feature temporary, or leave the door open to network vulnerabilities. <br />Moreover, the name is misleading, WebSocket are not sockets for the web. You must indeed connect to server that can handle the protocol. You cannot use them to connect to any TCP server.
                                </p>

                                <p>
                                  Silverlight 5, meanwhile, offer support for <a href="https://msdn.microsoft.com/en-US/library/system.net.sockets.socket(v=VS.95).aspx">sockets</a> on TCP and <a href="https://msdn.microsoft.com/en-US/library/ee707325(v=VS.95).aspx">multicast</a>. There is of course security constraints related to using of these classes (<a href="https://msdn.microsoft.com/en-US/library/cc645032(v=VS.95).aspx">cross-domain policy for example</a>) to prevent opening security gaps in Silverlight. <br />So we can easily attribute the victory to Silverlight both on <strong>functionality</strong> and <strong>availability</strong>.
                                </p>

                                <h1>
                                  Devices (cameras, microphones & printers)
                                </h1>

                                <p>
                                  Silverlight 5 provides access to the datastream from the camera or microphone. It can also send a print job controlling the drawing of each printed page. <br />HTML 5 on the subject is currently a bit light in terms of access to the camera or microphone. Several <strong>specifications</strong> are in progress and for the moment no browser supports them:
                                </p>

                                <ul>
                                  <li>
                                    <a href="https://www.w3.org/TR/2010/WD-media-capture-api-20100928/">Media Capture API</a>
                                  </li>
                                  <li>
                                    <a href="https://www.w3.org/TR/2011/WD-html-media-capture-20110414/">HTML Media Capture</a>
                                  </li>
                                  <li>
                                    <a href="https://html5labs.interoperabilitybridges.com/prototypes/media-capture-api/media-capture-api/info">Microsoft also proposes changes to the standard via Html5Labs</a>
                                  </li>
                                </ul>

                                <p>
                                  It is difficult today to judge the HTML 5 platform on its ability to capture audio and video.
                                </p>

                                <p>
                                  To manage the printer, the only available method is <em>window.print</em>. Now it can just start printing without deciding the behavior of each page. <br />On the topic of devices access, Silverlight 5 wins by a large margin (<strong>for</strong> <strong>now</strong>).
                                </p>

                                <h1>
                                  Business case
                                </h1>

                                <p>
                                  Beyond the technical aspects, there are many other points to consider when choosing a technology.
                                </p>

                                <p>
                                  The first of these is the team skill level with those technologies. If the developers are trained in .NET obviously, Silverlight is an easy choice. Similarly, if the team is already versed in the dark arts of JavaScript, HTML 5 will be a better option.
                                </p>

                                <p>
                                  In a second step, the search for <strong>sustainability</strong> may be a strong factor of selection. And this is not so clear cut. Indeed, one can easily picture Silverlight having beautiful years ahead of it (or at least XAML +. NET). One thing is sure though, we are at the beginning of the adventure of HTML 5. <br />With the onset of tools, ever increasing browsers support or even the finalization of the standard, it does not take a rocket scientist to see that HTML 5 will be a <strong>huge success</strong>.
                                </p>

                                <p>
                                  However, we must remember that HTML 5 is a slow-moving standard where Silverlight can change very quickly and if you ever miss a Silverlight feature in an HTML 5 development, there will be water under the bridge before it actually makes it to the standard.&#160;
                                </p>

                                <p>
                                  Focusing next on <strong>ease of implementation, </strong>I think Silverlight today has clearly a better VS support, debugger, profiler, frameworks and patterns. So for now, there is no match. Of course this could change rapidly especially with the future versions of Visual Studio. In addition for certain takes browsers can help with tools like the developers bar in IE9 (F12) that allows debugging, profiling and analyzing the code.
                                </p>

                                <p>
                                  Finally, there remains the question of portability. From the site <a href="https://riastats.com">https://riastats.com</a>, here are the distributions found worldwide:
                                </p>

                                <p>
                                  <a href="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/4024.image_3D2E5A3A.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/4024.image_5F00_3D2E5A3A.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="image" border="0"  src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/4846.image_thumb_3B7D8E66.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/4846.image_5F00_thumb_5F00_3B7D8E66.png" width="408" height="383" /></a>
                                </p>

                                <p align="center">
                                  <strong>73 % of browsers have Silverlight 4 installed</strong>
                                </p>

                                <p align="center">
                                  <a href="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/4034.image_58A33670.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/4034.image_5F00_58A33670.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0"  src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/5516.image_thumb_04DFBD55.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/5516.image_5F00_thumb_5F00_04DFBD55.png" width="408" height="378" /></a>
                                </p>

                                <p align="center">
                                  <strong>75 % of browsers supports HTML5 (a least a part of it)</strong>
                                </p>

                                <p>
                                  We can see that Silverlight 5 and HTML 5 seem to be supported at the same level. However, it is somewhat more complex in reality. In fact, if your project targets only Windows and Mac OS, Silverlight is as well supported as HTML 5. By contrast, in IOS and Android, only HTML 5 is supported.
                                </p>

                                <p>
                                  Also note that Silverlight can work "<strong>outside the browser</strong>" like a normal application (and therefore with elevated rights) which may be interesting for some projects.&#160;
                                </p>

                                <p>
                                  One should not be lulled by the myth of absolute portability of HTML 5. For now, the standard is evolving and will not be completed until 2014 at best. During this time and certainly for a long time afterwards, the browsers will be trying to support the standard. Thus, it will force us to write more code than necessary sometimes for specific versions (besides there is a JavaScript library that facilitates this work <a href="https://www.modernizr.com/">modernizr</a>).
                                </p>

                                <p>
                                  A final important aspect lies in the protection of intellectual property. There are obfuscators for both technologies (<a href="https://javascript-obfuscator.com/">for example this one for Javascript</a>) but we can see that as a result of compilation, Silverlight (IL) is more difficult to reverse engineer. In addition the XAML is not directly exposed: it is easier to get the HTML (directly sent to the browser).
                                </p>

                                <h1>
                                  Conclusion
                                </h1>

                                <p>
                                  In the end, there is <strong>no winner</strong>. We have two complementary technologies. Even if today there are more boxes with Silverlight 5 than boxes with HTML, the choice is not as simple as it is ultimately project dependent.
                                </p>

                                <p>
                                  Indeed, it is sufficient that the project targets both Windows and Android tablets to push HTML 5 as the best solution.
                                </p>

                                <p>
                                  So in the Web development world, we have to live with both, and know them well enough to provide the <strong>right solution at the right time</strong>.
                                </p>

                                <p>
                                </p>