• Choose a category
• All
• Classic-Fiction

By Root 6451 0

a very simple debugging methodology using the console.log functionality of modern web browsers. This function lets you log text messages to the JavaScript console to help find problems (or opportunities!) with your code. Any browser that has a JavaScript console (Chrome, Opera, Safari, Firefox with Firebug installed) can make use of console.log. However, browsers without console.log support throw a nasty error.

To handle this error, we use a wrapper around console.log that only makes the call if the function is supported. The wrapper creates a class named Debugger, and then creates a static function named Debugger.log that can be called from anywhere in your code, like this:

Debugger.log("Drawing Canvas");

Here is the code for the console.log() functionality:

var Debugger = function () { };

Debugger.log = function (message) {

try {

console.log(message);

} catch (exception) {

return;

}

}

The 2D Context and the Current State

The HTML5 2D context (the CanvasRenderingContext2D object), retrieved by a call to the getContext() method of the Canvas object, is where all the action takes place. The CanvasRenderingContext2D contains all the methods and properties we need to draw onto the canvas. The CanvasRenderingContext2D (or context, as we will call it hereafter) uses a Cartesian coordinate system with 0,0 at the upper left and corner of the canvas, and coordinates increasing in value to the left and down.

However, all of these properties and methods are used in conjunction with current state, a concept that must be grasped before you can really understand how to work with HTML5 Canvas. The current state is actually a stack of drawing states that apply globally to the entire canvas. You will manipulate these states when drawing on the canvas. These states include:

Transformation matrix

Methods for scale, rotate, transform, and translate

Clipping region

Created with the clip() method

Properties of the context

Properties include strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, and textBaseline.

Don’t worry; these should not look familiar to you just yet. We will discuss these properties in depth in the next three chapters.

Remember earlier in this chapter when we discussed immediate mode versus retained mode? The canvas is an immediate mode drawing surface, which means everything needs to be redrawn every time something changes. There are some advantages to this; for example, global properties make it very easy to apply effects to the entire screen. Once you get your head around it, the act of redrawing the screen every time there is an update makes the process of drawing to the canvas straightforward and simple.

On the other hand, retained mode is when a set of objects is stored by a drawing surface and manipulated with a display list. Flash and Silverlight work in this mode. Retained mode can be very useful for creating applications that rely on multiple objects with their own independent states. Many of the same applications that could make full use of the canvas (games, activities, animations) are often easier to code with a retained mode drawing surface, especially for beginners.

Our challenge is to take advantage of the immediate mode drawing surface, while adding functionality to our code to help it act more like it works in retained mode. Throughout this book we will discuss strategies that will help take this immediate mode operation and make it easier to manipulate through code.

The HTML5 Canvas Object

Recall that the Canvas object is created by placing the tag in the portion of an HTML page. You can also create an instance of a canvas in code like this:

var theCanvas = document.createElement("canvas");

The Canvas object has two associated properties and methods that can be accessed through JavaScript: width and height. These tell you the current width and height of the canvas rendered on the HTML page. It is important to note that they are not