OK another new one. This one is similar to the ‘light orb’ moving around the canvas. It uses a loop on the drawing function that follows the mouse around. At the moment it only works with themousemove event. I’ll re-post it once I have got it to work with a mousedown.

This was a fun one! It came about as I was testing the createRadialGradient() method. Originally I had random x and y positions, then random radius sizes. This then moved onto a little bit of simple maths to create the ‘mirror image’ on the second canvas. This then developed into a bit more interactivity. Starting with addEventListener('click',function,false) to trigger the circles to move to the position on the canvas that had been clicked by getting the mouse coordinates. A simple change from click to mousemove made this little test come alive. Try it out!

Here’s an example of what’s possible with the new HTML5 technologies. I’ve been playing around with this and am enjoying the freedom that this new element gives us. This will not work in Internet Explorer so please upgrade your browser ASAP! Works in Opera 10.53, Firefox 3.6.3 Google Chrome 5.0.375.70, Safari 5.0.

Google Chrome runs this the best with its higher frame rate.

HTML 5 Canvas Example