Applying Old-School Video Game Techniques in Modern Web Games - HTML5 Game Development Insights - page 128

One other thing that you need to keep in mind is that when you draw the cells, you'll need to take scrollX and
scrollY into account, which means that the following code
paintCell(ctx,
j * cellWidth,
i * cellHeight,
cellWidth,
cellHeight);
// Print the current values of i and j for each cell
ctx.fillStyle = '#000';
ctx.font = '10px Arial';
ctx.textAlign = 'center';
ctx.fillText(i + ' ' + j,
j * cellWidth,
i * cellHeight);
will now look like this (notice the addition of the scrollX / scrollY variables):
paintCell(ctx,
(j * cellWidth) - scrollX,
(i * cellHeight) - scrollY,
cellWidth,
cellHeight);
// Print the current values of i and j for each cell
ctx.fillStyle = '#000';
ctx.font = '10px Arial';
ctx.textAlign = 'center';
ctx.fillText(i + ' ' + j,
(j * cellWidth) - scrollX,
(i * cellHeight) - scrollY);
The results speak for themselves. See Figure 8-8 .
Figure 8-8. Results of Listing 8-23 and Modifications