HTML5 Canvas Cookbook

Creating a View class

In this recipe, we'll create the View class, which is the simplest of the three MVC classes. The View class is responsible for drawing state screen images and also renders each animation frame by calling the draw() method for the level, each of the bad guys, the hero, and the health bar. In addition, the View class also renders a handy FPS display in the top-right cornerof the screen so we can see how well the game is performing.

How to do it...

Follow these steps to create the view for Canvas Hero:

1. Define the View constructor:

   /* * Game view * * The view has access to the canvas context * and is responsible for the drawing logic */ function View(controller){ this.controller = controller; this.canvas = controller.anim.getCanvas(); ...