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 5-7
p5 last code example, pg 6 "showIntro()" example |
In the code examples on the aforementioned pages it uses:
var logoImg = new Image();
logoImg.src = '../img/logo.png';
var originalWidth = logoImg.width;
...
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
Due to JavaScript's asynchronous the image does not load until after the canvas. However, a catch 32 exists in that in between the code (not shown here) calculations are done against an image that has yet to be loaded (e.g. logoImg.width calls). Therefore parameters such as originalWidth are 0.
This causes the logo.png to not load on the canvas. As such you must click the refresh button after the initial load in order for the logoImg to actually load. In order to correct this you must wrap your code in the logoImg.load call to prevent a manual refresh/reload or a double reload in order to get the logo.png to display. As such:
...
var logoImg = new Image();
logoImg.onload = function() {
var originalWidth = logoImg.width;
logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
c.fillStyle = "#000000";
c.font = "bold 16px Arial, sans-serif";
...
c.fillText (phrase, xCoord, (logo.y + logo.img.height) + 50);
};
logoImg.src = "../img/logo.png";
}
See documentation here for more information: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images
|
John Sacks |
Mar 18, 2013 |
PDF |
Page 1
Chapter1, Page 2 |
In the middle of page 2, talking about how to access a canvas through JavaScript.
------
In order to start using the HTML5 Canvas API, we just need to reference the canvas tag by using its id attribute value (myCanvas),
------
But the HTML code above this paragraph is
------
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas tag.
</canvas>
------
and the JavaScript below is :
------
window.onload = function () {
var canvas = document.getElementById('game');
var c = canvas.getContext('2d');
}
------
In this part, the id should be "game". Although in the rest of the book, it is "myCanvas".
|
Anonymous |
Dec 15, 2011 |
Printed |
Page 59
center code: function draw() |
Multi-tile objects are not always drawn correctly:
When placing cinemas on tiles [3,2] and [1,3], the "foreground" cinema on [3,2] is partly hidden by the "background" cinema on [1,3].
Note:
In the code repository, the drawing loops are interchanged (row first, then col). In this case, a "foreground" cinema on [2,3] is partly hidden by a "background" cinema on [3,1].
I think, drawing should not be in row order or in col order, but diagonally:
first draw tile [0,0]
then [1,0], [0,1]
then [2,0], [1,1], [0,2]
and so on.
|
joerg fellner |
Nov 09, 2011 |
Printed |
Page 59
top: // Place the building |
For calculating the building locations according to Figure 2-10 on page 56, must make
new BuildingPortion(cinema.buildingTypeId, row-i, col-j)
(instead of coordinates i, j)
|
joerg fellner |
Nov 08, 2011 |
Printed |
Page 53
middle: // Check the boundaries! |
Must check
.. && row < grid.width && col < grid.height
(compare to < instead of <=)
|
joerg fellner |
Nov 08, 2011 |
Printed |
Page 52
Code blocks 2/3: translate mouse clicks |
Computing row and col from mouse click with this formula assumes mouse coordinates relative the Canvas element. The properties e.clientX and e.clientY, however, return coords relative the browser window, which does not take into account Body margins/paddings and scrolling the browser window.
So: use the equivalent of MS IE's properties
e.offsetX and e.offsetY
instead of
e.clientX and e.clientY
or:
remove any Body margins/paddings, and avoid scrolling.
|
joerg fellner |
Nov 04, 2011 |
Printed |
Page 52
Code block 1: grid offsets |
The grid offsets do not depend on the grid dimension, but only on moving the grid on the canvas element, such as centering it with (canvas.width / 2) - (tile.width / 2).
Test:
Running example 2-3 with a grid of dimension 100 x 100 does not produce acceptable results.
So: use
var gridOffsetX = 0, gridOffsetY = 0;
instead of
var gridOffsetX = grid.width, gridOffsetY = grid.height;
Note:
Mabe, this problem was introduced to compensate for using e.clientX/Y instead of e.offsetX/Y for translating the mouse clicks.
|
joerg fellner |
Nov 04, 2011 |
Printed |
Page Page 51
Figure 2-6 |
Tile 1,0 is located at X: CW/2, which is computed from (CW/2 - TW/2) + 1 * TW/2.
The text in the figure shows the wrong location X: CW/2 - TW/2.
From the image, it is not easy to locate Tile 1,0.
|
joerg fellner |
Nov 04, 2011 |
|
8
fadeToWhite function |
alphaVal does not need to be re-declared with "var" since it is in already declared in the function's arguments array.
|
Peter Menner |
Sep 14, 2011 |
Other Digital Version |
1
|
JavaScript should have a capital 'S' in Script on the front cover / book title.
|
Christian Oliff |
May 29, 2011 |