HTML and CSS Reference
We know you can find tutorials similar to Canvas Ricochet online, but our lesson is far
more in-depth. Here are a few of the topics covered in this chapter that go beyond what you
find in free tutorials:
• Advanced Canvas API usage (gradients, paths, arcs, and more)
• Progressive level enhancement with scorekeeping
• Implementing a Canvas design pattern into a fully functional application
You'll create a simple ball-and-paddle-based game called Canvas Ricochet, which includes
animated elements, collision detection, and keyboard/mouse/touch controls. After you as-
semble those components, you'll take everything a step further and create a fully polished
product, which includes a score counter, progressively increasing difficulty, and an open-
ing/closing screen. Adding polish greatly helps to monetize a game's worth, resulting in a
better return on investment.
After completing this chapter on 2D Canvas, you'll have learned all the necessary tools to
build your own Canvas applications from scratch. First up is the Canvas context.
6.1. Canvas basics
No matter what type of Canvas application you build, your first two steps will involve the
Canvas context: setting it and generating it. Without a context, you won't be able to draw
anything. Then, you'll need to verify that the current browser can actually support Canvas.
6.1.1. Setting the Canvas context
Before working with Canvas, you must choose a set of drawing tools from the API via