Course List >> Javascript and jQuery >> Advanced Browser Work >> 4: Using Canvas to Draw and More
Scroll up or hover over the breadcrumbs to view the navigation bar

Using Canvas to Draw and More

Canvas is a great tool in HTML5 -- it basically provides a panel in which you can use Javascript and math to draw pretty much anything. It's useful for everything from gaming to image optimization. In our case, we'll focus on games because it gives you a chance to flex your pure Javascript muscles creatively. For the first time so far, you'll get to build games that operate dynamically in 2-D space (not confined to a grid). Use that power only for good...

Points to Ponder

  • What is Canvas?
  • How do you set up a Canvas element?
  • How do you draw a 5 pixel black square with a red outline?
  • How can you use refreshes to animate things?
  • How would you make a ball that bounces off walls?
  • How would you make two balls that bounce off walls or each other?
  • What happens if you refresh too many calculations or too rapidly?

Your Assignment

  1. Do chapters 1-6 in the Canvas Deep Dive book, which is the best explanation I've seen.
  2. Browse through the No Tears Guide to HTML5 Games from html5rocks.com in preparation for your next project.

Additional Resources

This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150