Using Canvas to Draw and More

Introduction

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…

Learning Outcomes

  • 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?

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.

Javascript and jQuery

Using Canvas to Draw and More

Got questions?

Chat with our friendly Odin community in our Gitter chatrooms!

Open Gitter

Are you interested in a more immersive web development learning experince?

Learn more

Viking Code School

  • 12 weeks

    12 Weeks

  • Fully Online

    Fully Online

  • Mentorship

    Mentorship