Canvas Test with Ball

You see this text only if your browser doesn't support HTML5. If you see this text, you will not see any animation. Try using a better Web browser, such as Chrome.

Above, you see a canvas object.* The code executing in the canvas is JavaScript, from processing.js. There are no images. This is pure JavaScript (see the code). If you want to stop the animation, move your mouse into the box. To start it again, move the mouse out of the box.

I learned how to do this from two sources:

  1. Khan Academy -- see my basic code there
  2. Joseph Cadle Allgaier, who explained how to put it all together

* If you see an empty box, JavaScript is disabled in your browser.

Canvas Playground index