Showing the Frame Rate on Canvas Animations

A while back I built a silly little performance-testing animation that I called “Bouncer”. It’s nice, but I noticed recently that it was missing a vital component: an indication of the frame rate. I added one this morning, and I thought I would share the code with you.

Bouncing Canvas Balls with Gravity and Friction

I went a little crazy with this one. I know it doesn’t look like much, but there’s a lot going on inside that canvas thingy. If you click on the button or on the canvas, a bunch of black circles will bounce around with their own vectors, speeds, elasticity, and with a shared bit of gravity.

Animating a Solar System with the HTML5 Canvas

Here’s a swanky little bit of animation from the HTML5 Canvas. If you don’t see it, then your browser doesn’t support canvas, which means that you’re using an old version of Internet Explorer. (You should stop doing that.) The goal was to see what I could draw programmatically with the canvas API.