HTML 5 Canvas Radial Gradient Demo
- June 19th, 2010
- Posted in Uncategorized
- By Steve
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!

