Drawing Images to the HTML Canvas in TypeScript

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 an Image to the 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();
}

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();
};

 

Here is the basic sprite app (use arrow keys)

Embed Games

 
To suggest an improvement, or just say hi, please contact me on twitter :-)

Follow @battagline or  Tweet to @battagline

Thanks,
Rick