Here’s a little fun one that I made this evening. I’ve used some Flash code that I found and turned it into JS. Every time I do one of these I realise how much easier things are in ActionScript. But that’s not why I’m doing it of course! Still not working 100% in IE. excanvas.js is doing its job and getting the canvas element plus the bouncing ball to show up in IE8, however it’s not playing nicely with the event listeners. Will explore it in more detail soon. Pun intended.

Anyway, here is what I have so far:

http://www.stevekane.com.au/test/canvas/throw.html

- Stevo

O.K. here it is! I will keep working on this one making it prettier and have a few extra features (maybe a colour picker or something). Simply draw on the left canvas after choosing your brush style. The right canvas still replicates the left. I have left this on purely for fun, it does have some cool effects on the right hand side! Special thanks go to my sister(28) for the demo drawing you see below. If you really like your creation, right click and choose save image. Stay tuned for a bouncing ping pong ball coming up as I dive into a bit of animation. This stuff is fun!

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!