HTML and CSS Reference
In-Depth Information
Third, Paint the Tile-Based World to the Canvas
Our world is built using a 15x15 grid.
Figure 9-13
shows the entire world we will use in our
scrolling examples.
Figure 9-13. A 15×15 tile map
For the scrolling examples, we use a canvas that is smaller than the world. We are using a
small canvas (160×160) and a small world (480×480) simply to make sure that the code is
easily understood in topic form. In a real-world example, the tile-based world might be 100+
tiles in each dimension, drawn onto a canvas that is 640×480. Here is the HTML5 Canvas ob-
ject we will be using:
<
canvas id
=
"canvas"
width
=
"160"
height
=
"160"
>
