Rendering an Image to the HTML Canvas

The easiest way to load an image onto your website is with an HTML image tag in the DOM. That will simply place an image on your website where ever you place your tag. If you don't want the image to actually appear in the DOM on your web page, you may want to set style="display:none". I'm dropping the following .png file into an image directory for my website.

The image tag to be added to the html file will look like the following:

<img src="/images/ship.png" id="spaceship" style="display:none"/>

Rendering the Image tothe Canvas

We will need to use the class cKeyboardInput that we defined in the Input Basics chapter. We are going to need to render our space ship to the canvas from within our game loop, and we will need to keep track of the x and y coordinates for that sprite.

Here is what our game loop will look like after we've changed it to render our sprite.

var img: HTMLImageElement;
var x: number = 50;
var y: number = 50;


function gameLoop(): void {
   requestAnimationFrame(gameLoop);
   keyInput.inputLoop();

   ctx.fillStyle = "black";
   ctx.fillRect(0, 0, 1280, 720);

   ctx.save();
   ctx.translate(x, y);
   ctx.drawImage(img, 0, 0, img.width, img.height);
   ctx.restore();
}

Adding the Keyboard Input

We're going to need to set the img variable to our space ship when the web page has finished loading. We are also going to need to add callback functions to be called by the keyInput object when the player presses the arrow keys. We'll have those functions change the x and y coordinates of the space ship while the player is holding down one of the arrow keys.

window.onload = () => {
   img = <HTMLImageElement>document.getElementById('spaceship');
   canvas = <HTMLCanvasElement>document.getElementById('cnvs');
   ctx = canvas.getContext("2d");

   keyInput = new cKeyboardInput();

   // PRESS LEFT ARROW OR 'A' KEY
   keyInput.addKeycodeCallback(37, shipLeft);
   keyInput.addKeycodeCallback(65, shipLeft);

   // PRESS UP ARROW OR 'W' KEY
   keyInput.addKeycodeCallback(38, shipUp);
   keyInput.addKeycodeCallback(87, shipUp);

   // PRESS RIGHT ARROW OR 'D' KEY
   keyInput.addKeycodeCallback(39, shipRight);
   keyInput.addKeycodeCallback(68, shipRight);

   // PRESS DOWN ARROW OR 'S' KEY
   keyInput.addKeycodeCallback(40, shipDown);
   keyInput.addKeycodeCallback(83, shipDown);

   gameLoop();
};

function shipUp(): void {
   y-=2;
}

function shipDown(): void {
   y+=2;
}

function shipLeft(): void {
   x-=2;
}

function shipRight(): void {
   x+=2;
}

Use the arrow keys to move the ship

You can take a look at the full source code.

Next -> Texture Atlas Tutorial