The errata list is a list of errors and their corrections that were found after the product was released.
The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.
Version |
Location |
Description |
Submitted by |
Date submitted |
Printed |
Page xix
"web page for this book" |
My book lists the web page for this errata, examples, etc., as oreil.ly/html5-canvas-2edition. WHAT? It's a bogus address. There is an actual page, but I had to go to www.oreilly.com and search for it.
|
Chris Alley |
Oct 06, 2020 |
PDF, Mobi |
Page 44
first paragraph |
"Then it draws an arc from that point to the y1, y2 point" -> should be "x2, y2" point.
|
Filip ?imek |
Jun 23, 2014 |
Printed |
Page 44
44 |
It takes in a point (x1,y1) and draws .....that point to the y1,y2 point, using the given radius
should be something like this
It draws an arc with the given radius that starts and is tangent to the line defined by points (x0, y0) and (x1, y1) and ends and is tangent to the line defined by points (x1, y1) and (x2, y2), where (x0, y0) is the last point in the current path. It also connects point (x0, y0) with the starting point of the arc
|
Paolo Baronti |
Nov 27, 2016 |
Printed, PDF |
Page 46
5 |
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()".
|
Jack Holt |
Jul 03, 2013 |
Printed |
Page 85
First paragraph of "fillText and strokeText" section |
"The color used is set in the context.fillColor property"
should be
"The color used is set in the context.fillStyle property"
|
Palo Baronti |
Nov 27, 2016 |
Printed |
Page 86
First paragraph |
"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"
|
Paolo Baronti |
Nov 27, 2016 |
Printed |
Page 93
First paragraph, code expression |
context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
should be
context.font = fontStyle + " " + fontWeight + " " + fontSize + "px " + fontFace;
|
Paolo Baronti |
Nov 27, 2016 |
PDF, Mobi |
Page 98
Horizontal alignment section |
'start', 'end', 'left' and 'right' all refer to 'y' position. I think that it doesn't make sense for Horizontal alignment and that it should refer to 'x' position
|
Filip ?imek |
Jun 23, 2014 |
Printed |
Page 106
2nd code line |
shadowColor = target.value;
should be
shadowColor = "#" + target.value;
|
Paolo Baronti |
Nov 27, 2016 |
Printed |
Page 106
Last paragraph |
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
|
Paolo Baronti |
Nov 27, 2016 |
PDF |
Page 109
description of image parameter to context.createPattern |
"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
|
Paolo Baronti |
Nov 27, 2016 |
Printed |
Page 112
Description of Linear gradient |
the colors are textFillColor1 and textFillColor2
should be
the colors are textFillColor and textFillColor2
|
Paolo Baronti |
Nov 27, 2016 |
Printed |
Page 112
Description of Linear gradient |
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.
|
Paolo Baronti |
Nov 27, 2016 |
Printed |
Page 122
Line 12 |
context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
should be
context.font = fontStyle + " " + fontWeight + " " + fontSize + "px " + fontFace;
|
Paolo Baronti |
Nov 27, 2016 |
Printed |
Page 124
function shadowColorChanged |
shadowColor = target.value;
shoud be
shadowColor = "#" + target.value;
|
Paolo Baronti |
Nov 27, 2016 |
Printed |
Page 132
Final lines of the code |
The html code ends with
</div>
</body>
</html>
There is no opening <div> tag in the code.
|
Paolo Baronti |
Nov 27, 2016 |
Printed |
Page 138
Penultimate paragraph |
The placeShip() function accepts the context, the image object, the x and y positions, and a height and width.
should be
The placeShip() function accepts the image object, the x and y positions, and a height and width.
since according to the code samples immediately above the text:
function placeShip(obj, posX, posY, width, height) {
...
}
the function doesn't take the context as parameter.
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 163
First line |
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight, 0, 0,
windowWidth,windowHeight);
should probably be
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight, 0, 0,
viewPortWidth,viewPortHeight);
according to the descriptions of the parameters that follows.
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 164
First paragraph of new section |
In the paragraph
We can change the ViewPort property of the drawn image by modifying the viewPort
Width and viewPortHeight values. Example 4-12 shows the image drawn into a 200×200
window, using the same pixels as the 400×400 copy from Example 4-11
400x400 should be replaced with 500x500 since this is the size used in Example 4-11.
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 166
Top and bottom of page |
The text
Example 4-13 modifies Example 4-12 and ...
should probably be
Example 4-13 modifies Example 4-11 and ...
The same applies to
If you compare the output from Examples 4-12 and 4-13, you ...
where 4-12 should be 4-11.
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 168
Final paragraph |
...the same window and window properties as Example 4-14 and the same source scale factor as Example 4-15:
should be
...the same window and window properties as Example 4-14 and the same source scale factor as Example 4-13:
|
Paolo Baronti |
Nov 29, 2016 |
PDF, Mobi |
Page 175
TileId calculation |
TileId = (row*totalRows-1) + (col+row);
should be totalColumns instead of totalRows. Besides that, (totalRows - 1) should be in parentheses, otherwise the result would be incorrect.
A simpler formula could be used instead:
TileId = row * totalColumns + col;
|
Filip ?imek |
Jun 23, 2014 |
Printed |
Page 176
Page |
Several occurrences of ImageData represent a variable and should probably start with a lowercase letter as in imageData.
Even if this is not technically incorrect ImageData is actually the name of the type of the object so it might be confusing.
Also Example 4-16 on page 177 uses imageData.
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 176
Final lines of code |
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.
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 184
Code sample |
context.clearRect(0,0,theCanvas.width, theCanvas.height);redObject.x=348;
should be
context.clearRect(0,0,theCanvas.width, theCanvas.height);
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 185
Code sample |
var yMax = Math.min( blueObject.y+blueObject.height, redObject.y+redObject.height
should be
var yMax = Math.min( blueObject.y+blueObject.height, redObject.y+redObject.height );
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 186
Numbered steps |
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.
|
Paolo Baronti |
Nov 29, 2016 |
Printed |
Page 187
España |
The code for example 4-18 does not seem to detect pixel collision correctly. There is an alternative file called "Ch4Ex18_test.html" in the exercise files that doesn't do the job, too: there's no collision detection at pixel level.
|
Luis Quintana |
Sep 21, 2014 |
PDF, Mobi |
Page 195
above gameLoop function definition |
"And create the interval to call drawScreen() every 33 milliseconds"
Should be 50 milliseconds as the second parameter to setTimeout is 20, not 30
|
Filip ?imek |
Jun 23, 2014 |
PDF, Mobi |
Page 200
middle of the page |
The whole "So why not just use..." paragraph seems too oversimplifying to me. Why not say that the circle is 2 pi radians instead of "just about 6"? Why does 360 degrees make more sense than 2 pi radians?
"angles are much easier", "we will work with angles" -> both degrees and radians are angular units. There should be "degrees" instead of "angles"
|
Filip ?imek |
Jun 23, 2014 |
PDF, Mobi |
Page 200
cosine definition |
"cosine: The angle measured counterclockwise from the x-axis"
This is wrong; cosine is not an angle. From Wikipedia:
"The cosine of an angle is the ratio of the length of the adjacent side to the length of the hypotenuse."
Could be:
"The horizontal coordinate of the arc endpoint (x)" in line with the sine definition.
|
Filip ?imek |
Jun 23, 2014 |
Printed |
Page 210
Middle of page |
The paragraph
The tempSpeed variable is created by subtracting the value of tempRadius from the value
of maxSpeed, which we created earlier. The speed is not random, but it is inversely
proportional to the size (radius) of the ball.
is incorrect because inverse proportionality is defined through division, not subtraction.
The speed would be inversely proportional to the radius if it were defined like this:
tempSpeed = maxSpeed / tempRadius
Therefore the sentence
The speed is not random, but it is inversely proportional to the size (radius) of the ball.
should be changed to something like
The speed is not random, but it is dependent on the size (radius) of the ball.
|
Paolo Baronti |
Dec 01, 2016 |
Printed |
Page 210
Code at the bottom |
Since minSize and maxSize are defined to be the minimum and maximum radius length for any ball on page 209, the line of code
tempRadius = Math.floor(Math.random()*maxSize)+minSize;
is incorrect since it produces a radius value between minSize and minSize + maxSize.
The correct line should be
tempRadius = Math.floor(Math.random()*(maxSize-minSize))+minSize;
|
Paolo Baronti |
Dec 01, 2016 |
Printed |
Page 210
Code at the bottom |
In the lines
tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2);
tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2);
the value of tempRadius*2 is both added to and subtracted from the actual result, making no change at all. The coordinates produced are within the canvas region but are not offset from the border as the are supposed to be.
A possible fix could be
tempX = tempRadius * 2 + Math.floor(Math.random() * (theCanvas.width - tempRadius * 4));
tempY = tempRadius * 2 + Math.floor(Math.random() * (theCanvas.height - tempRadius * 4));
|
Paolo Baronti |
Dec 01, 2016 |
Mobi |
Page 222
Circle collision detection |
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.
|
Filip ?imek |
Jun 23, 2014 |
Printed |
Page 319
España |
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"' >
|
Luis Quintana |
Sep 23, 2014 |
|
553
Chpt9 code source listing renderPlayerShip function |
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.
|
roger deutsch |
Oct 01, 2013 |