title: HTML Canvas Vs Stacked Div Performance
body: <p>basically i have a div set up like so:</p>
  
  <pre><code>    &lt;div class="pane"&gt;
          &lt;div class="banner"&gt;
              &lt;img class="original" src="images/picture.jpg" width="100%" height="100%" /&gt;
  
              &lt;div class="blurred"&gt;&lt;/div&gt;
              &lt;div class="blurred_colour"&gt;&lt;/div&gt;
              &lt;div class="focused"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Ok my script hides <code>.original</code> and then gets the source of it and creates 3 different images for each of the divs. They are all canvas tags generated in javascript.
  <code>.blurred</code> contains a desaturated and blurred version of the original. <code>.blurred_colour</code> contains a blurred version but in colour. <code>.focused</code> is just the original image.</p>
  
  <p>Now i also put a border image on top of each div and position relative so it appears on top and not below the divs. So if your keeping track, thats 3 divs, 3 canvas images and 3 border images (png) positioned ontop of the 3 canvas images. And the 3 main divs are stacked on to each other. I animate using alot of opacity changes with jQuery animate.</p>
  
  <p>As you can guess, some browsers display this animation fairly choppy and it will probably be worse with less powerful computers.</p>
  
  <p>My question is, would it be possible to rewrite all of this with just 1 canvas tag while still having all of these animations but also have much better performance then how I am currently doing it?</p>