New HTML5 Canvas Experiments and tutorials section of my website

This post talks about the new HTML5 Canvas part of my website and what I plan to do with it.

The new page on my website!

I have added a link on the homepage of my website to the new HTML5 canvas experiments and tutorials section. Here you will be able to view all my HTML5 experiments and tutorials.

The plan for the website

As I slowly learn more about the HTML5 canvas API I am planning to make a number of tutorials and experiments. This is to act as a study aid to reinforce my learning and a guide for others following a similar path.

One of the main objectives for learning HTML5 canvas is to replace some of the flash animations in MagicDuel.

Some of the ideas I am looking to implement are:

• Moving an object around a container
• Simple circular progress indicator
• Simple Mandelbrot fractal viewer
• Genetic algorithm visualising creatures moving towards an objective

These start from a quite simple box moving around a container to the more complex genetic algorithm based creatures moving to an objective.

In some of the cases above, I will be using the canvas animation to visually demonstrate more complex code such as a genetic algorithm.

In addition to the various experiments above I will intersperse them with some more basic tutorials. These will be discussing some common graphics techniques such as offscreen rendering which we can utilise with the HTML5 canvas.

The first tutorial has already been posted and I am going to be posting more in the near future.

I will be blogging as I add more content to this part of the site. If you have an idea I could work on or have any suggestions contact me or leave a comment below!