Errata

Step 2 recites:

2. Add the result of subtracting the current y of our object from the current pixelY
value to the result in step 1.

but should be instead something like

2. Subtract the current y of our object from the current pixelY value, multiply by the object width and add the result to the result in step 1.

The code below the steps is correct though.

Concerning function highlightTile() the authors suggest that

"The x and y coordinates can be found by passing in the tileId value,
but they are needed in the onMouseDown function, so we pass them in
from there when calling highlightTile(). This way, we do not need
to perform the calculation twice."

According to that there is really no reason to calculate startX and startY as

var startX = Math.floor(tileId % 8) *32;
var startY = Math.floor(tileId / 8) *32;
context.strokeStyle = "red";
context.strokeRect(startX,startY,32,32)

This should be replaced with

context.strokeStyle = "red";
context.strokeRect(x,y,32,32)


This also applies to Example 4-16 on page 178.

The text says:
"Our line will start at the beginning of the text (xPosition-textWidth/2 because the text uses the center alignment), and runs horizontally to the end of the text (textWidth)"

In order to reach the end of the text the final point should be xPosition + textWidth/2 instead of textWidth.
The same correction should be applied to the code on page 113 where

var gradient = context.createLinearGradient(xPosition-textWidth/2, yPosition, textWidth, Position);

should be replaced with

var gradient = context.createLinearGradient(xPosition-textWidth/2, yPosition, xPosition+textWidth/2, yPosition);

Note, however, that this only works if the user selects "center" for the "Text Align" control.

shadowColor = target.value;

shoud be

shadowColor = "#" + target.value;

context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;

should be

context.font = fontStyle + " " + fontWeight + " " + fontSize + "px " + fontFace;

"A valid Image object that has been loaded with an image by setting the pattern.src property"

should probably be

"A valid Image object that has been loaded with an image by setting its src property"

Object pattern is not actually defined to be of type Image object. Also that could be confused with the object returned by the call to context.createPattern defined in a previous line as

var pattern = context.createPattern([image], [repetition]);

which is actually of type CanvasPattern, an opaque object that as no accessible properties

We’ve already explored the fillColor and strokeColor properties of the Canvas

should be

We’ve already explored the fillStyle and strokeStyle properties of the Canvas

shadowColor = target.value;

should be

shadowColor = "#" + target.value;

context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;

should be

context.font = fontStyle + " " + fontWeight + " " + fontSize + "px " + fontFace;

"The color used to render the stroke is set in the context.strokeColor property"
should be
"The color used to render the stroke is set in the context.strokeStyle property"

"The color used is set in the context.fillColor property"
should be
"The color used is set in the context.fillStyle property"

When Example 6-5 is running and reading video files from local hard drive, (at least) Chrome 37.0 launches an exception "Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0). ".
I have found that the code runs correctly if a remote video file is loaded, and no exception is thrown. For example:
<source src="http://video.webmfiles.org/elephants-dream.webm" type='video/webm; codecs="vp8, vorbis"' >

If the length of the movement vector is larger than the ball's diameter then the presented collision detection method might not register all collisions. Sometimes, the balls might move through each other because the old balls' positions didn't collide and neither did the balls' new positions but they had an intersection somewhere on their trajectories between the endpoints of the movement.

The following line of code from the renderPlayerShip function is in the download source code and also appears in the source listing in Appendix A:
var angleInRadians = rotation * Math.PI / 180;

However, angleInRadians is not used in that function anywhere else.

The angleInRadians is again declared and used in the checkKeys function but that is a different variable (different scope).

This was a bit confusing as I investigated the code. Just an oversight I guess.

The first "context.beginPath()" (line 7) in example 2-5 is at the very least is not needed and at most is invalid code as there is not a matching "context.closePath()".