HTML Canvas Vs Stacked Div Performance

basically i have a div set up like so:

    <div class="pane">
        <div class="banner">
            <img class="original" src="images/picture.jpg" width="100%" height="100%" />

            <div class="blurred"></div>
            <div class="blurred_colour"></div>
            <div class="focused"></div>

        </div>
    </div>

Ok my script hides .original 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. .blurred contains a desaturated and blurred version of the original. .blurred_colour contains a blurred version but in colour. .focused is just the original image.

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.

As you can guess, some browsers display this animation fairly choppy and it will probably be worse with less powerful computers.

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?

---

It's difficult to say why, exactly, your code is slow here.

You don't have that many DOM elements so that is probably not the issue.

You should probably profile the code. F12 in Chrome or IE, go to profiler tab, run it, take a look at what is eating up all of the time.

What is it you are trying to accomplish, exactly? Some kind of blurring effect? Doing all of this in one canvas is probably preferable provided what you are attempting to do can easily be done that way.

What kind of animation? Are you physically moving DOM elements? That's bad. From a performance perspective, never do anything with the DOM if you can avoid it. If this is the case then putting everything in one canvas will probably help a lot. Again, its hard to say with such little detail.

Are you just doing blurring animation? In general, CSS blurring is faster (And easier to write) than Canvas blurring.

Anyway, the answer is probably not "Too many DOM elements." It is either too much DOM-heavy stuff or repeated work in the animation loop, or too much DOM interaction when all-in-canvas would be better.