HTML5 Canvas

Errata for HTML5 Canvas

Submit your own errata for this product.


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.


Color Key: Serious Technical Mistake Minor Technical Mistake Language or formatting error Typo Question Note Update



Version Location Description Submitted By Date Submitted
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 
Safari Books Online 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