Bagnall Software Consultants Ltd


HTML5 is the next generation of HTML. it is an emerging standard.

Here is a demonstration of using canvas to animate a banner, as used in the RuneScape website.

The original image from the page is divided into 1px wide strips (shown wider here for clarity).

I wanted to anchor the top of the banner and so the strips needed to stretch and contract based on a sine wave.

You can see that if we make the angle a function of the distance in x of the strip from the left, we make pleats.

With the dimensions of each strip, we can copy from the image to a portion of the canvas, using the sin modified dimensions.

But we need the pleats to be travelling along.

By incrementing an angular offset with each frame, we can create the effect that the wave is a travelling wave with a horizontal velocity

We can also configure amplitude and number of pleats

But it looks a bit flat. We have a flat image with nothing that places it in a scene

Where these banners had appeared previously, we had some sort of static shadow painted on the scene behind it.

This would look a bit strange to have a static shadow with a waving banner so the solution is simple.

Simply paste strips of a semi-transparent, dropped shadow image into the canvas, before the strips of banner are pasted in.

You need to enable JavaScript for this demonstration.
Your browser does not support the canvas element.

This demonstration shows how JavaScript and the new HTML 5 canvas element work together. Click on the rectangle to see vector shapes drawn using client side code. Note that the holes in the "B" do not enable you to see shapes that were already placed. HTML5 is a developing standard so this may be a bug in the browser rendering.

Your browser does not support the canvas element.

At time of writing, this demonstration shows how shadow drawing still needs some browser development. There is no shadow within the holes, instead a glow can be seen to the lower right of each hole on top of the shape.