Just in time for Hull Fair to leave (yes I know they left last week), I've finished recreating the big wheel using the HTML5 Canvas. It's even got search lights and gradients.

Here's a link to the Big Wheel - Make sure that you use a recent browser (I'm using ES6 classes).

The basic pattern I used to create it was to break the scene down into different things, create a different class for each thing (except the background), and then break each thing down into its component parts. Each component part then got its own drawing function, which are then all called by the master renderer function for that class.

In order to position everything correctly, I abused context.save(), context.restore(), context.translate() and context.rotate(). Since the saving / restoring of the canvas state works like a stack, you can push as many drawing states to the stack as you like, and then pop them all off when you're done.

If anyone is interested in proper 'making of' post, please comment down below and I'll write one up!.