HTML5 Canvas and the Wonders of Learning JavaScript

When first teaching myself JavaScript, I enjoyed playing around with the canvas tag. Here are some snippets I created to learn.

Rotational Time the clock that spins

A clock is one step above a 'Hello World', and perfect for the begginer.

Sparkler the requisite particle engine

A nice mix of physics and using data structures, writing a particle engine is an excellent and simple step in growing knowledge.

Flippable Circle and jQuery transitions

Having played around a bit with the HTML5 canvas, I wanted to be sure I had a firm founding in the basics of jQuery. This one uses animations comprised solely of jQuery! Click to flip the circle.


Lightbulb Moment of a CSS transition

I've always subscribed to the belief that one should know many ways to do things, so I tried to make sure my CSS skills were up to date as well. Hover for a lightbulb moment.


CSS Transition 2 the re-transitioning

For this one...well okay, this one was just because I really enjoyed doing CSS transitions, and wanted to try an animation that used CSS only. The result is simple, but I quite like it.

Validation and real-time translation

Please enter only numbers.

This one might not look very impressive, but things like form validation are such an important part of the JavaScript world that it would be remiss to ignore it! Type a number into the box above, and the last digit of the number will appear in the circle.