Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

HTML Canvas - Bouncing Colors

Just showing my progress toward learning HTML Canvas and trying to create something useful or entertaining. I regard this as my nemesis - i.e. what I most want to accomplish.

Some day, I hope to create a precision platformer via HTML canvas that rivals games like Mario or I wanna be the boshy, etc. Until then, baby steps help open doors to learning and opportunity.

I imagine the next creative step as being to implement a player object, gravity, jumping and platforms. Following up with level design, obstacles, items, and nuance mechanics that will help flesh out a fun and entertaining gaming experience.

It's not a game, but rather a step toward learning game design and perhaps may help others interested in this process.

Disclaimer: my code is not DRY. There is a lot of room for improvement, but I do like the end result.


Abe Layee
Abe Layee
8,378 Points

Robert Richey you might want to check out this book for Html5 Canvas by David Geary. It has what you're looking for like animation,graphics, and game development.

That's a solid recommendation. Paul Irish gives it 5/5 stars for Core HTML5 Canvas. Much appreciated!

Abe Layee
Abe Layee
8,378 Points

You're welcome anytime Robert Richey:D

2 Answers

Abe Layee
Abe Layee
8,378 Points

wow! Nice bro... That is like what I want to be doing on my site with cool animation. Great work Robert Richey. How many hours did it take you to achieve that?

Hi Abraham,

Thanks! Hard to say how many hours this took - a guess would be somewhere around 4 - 6 hours. It started off as just bouncing a circular arc around, inside a canvas element. Then I experimented with velocities, size, and color. Then I added the UI for adjusting the number of circles and whether each circle's tail would fade or not.

The big takeaway is that if you are going to do animation, is to use requestAnimationFrame(). Forget about setInterval(). I'm taking the lazy way out and not considering browser compatibility. To ensure animations are cross-browser compatible, use Paul Irish's solution:

 * Credit: Paul Irish

var requestAnimFrame = (function() {
        window.requestAnimationFrame        ||
        window.webkitRequestAnimationFrame  ||
        window.mozRequestAnimationFrame     ||
        window.oRequestAnimationFrame       ||
        window.msRequestAnimationFrame      ||
        function(callback, element) {
          window.setTimeout(callback, 1000 / 60);
Abe Layee
Abe Layee
8,378 Points

Alright, thanks again for sharing this amazing project and tip on animation using the requestAnimationFrame() method than setInterval(). I appreciate it.