Chapter 5. Building a Canvas Game's Masterclass

In the previous chapter, we explored some basic Canvas context drawing APIs and created a game named Untangle. In this chapter, we are going to enhance the game by using some other context drawing APIs.

In this chapter, you will learn how to do the following:

• Implement the Untangle game logic
• Fill text in the Canvas with a custom web font
• Draw images in the Canvas
• Animate a sprite sheet image
• Build multiple Canvas layers

The following screenshot is a preview of the final result that we are going to build through this chapter. It is a Canvas-based Untangle game with an animated game guideline and several subtle details:

You can also try the final game example at: http://makzan.net/html5-games/untangle/.

So let's get on with it.