HTML and CSS Reference
In-Depth Information
Figure 4-4 shows a tile sheet with the grid lines turned on in the drawing application.
These grid lines separate each of the tiles on the sheet.
Figure 4-4. The tile sheet inside a drawing program
Figure 4-5 is the actual tile sheet—without grid lines—that we will use for our further
Figure 4-5. The tile sheet exported for use in an application
The structure of the parameters for this third version of the drawImage() function looks
like this:
drawImage( Image, sx, sy, sw, sh, dx, dy, dw, dh )
sx and sy represent the “source positions” to start copying the source image to the
canvas. sw and sh represent the width and height of the rectangle starting at sx and
sy . That rectangle will be copied to the canvas at “destination” positions dx and dy . As
with the previous drawImage() function, dw and dh represent the newly scaled width and
height for the image.
Example 4-3 copies the second version of our spaceship (tile number 2) to the canvas
and positions it at 50,50. It also scales the image to 64×64, producing the result shown
in Figure 4-6 .
Example 4-3. Using all of the drawImage() parameters
var tileSheet = new Image();
tileSheet.addEventListener('load', eventShipLoaded , false);
tileSheet.src = "ships.png";
function eventShipLoaded() {
function drawScreen() {
//draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
Search WWH ::

Custom Search