The <canvas>
methods we've looked at so far are easy to use and nothing, if not a little, repetitive. Animating the objects on the <canvas>
element is where things start to get interesting. Animating is harder than simply drawing on the <canvas>
and as we have no real way of debugging it other than trial and error, solving bugs can quickly become problematic and somewhat time-consuming.
In our flag example, there was no real benefit to using the <canvas>
element. We could have got exactly the same effect, with much less code and processing, by simply including an image of the flag on our page. However, animating the <canvas>
element is where its benefits really begin. This is where we can do much more than anything we could achieve with a simple image. The additional complexity that animating the <canvas>
element entails is totally worth it.