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)

Check out the full sprite basics source code.

Games

 

More Games

Calculation Solitaire
Colorado Solitaire
Cruel Solitaire
Freecell
Classic Solitaire
Scorpion Solitaire
space invaders
asteroids
sudoku
mathjong
mahjong words
reversi
Pyramid Mahjong
Shell Mahjong
Smiley Mahjong
Starfish Mahjong
Top Heavy Mahjong
Classic Mahjong
Sudoku
Candy Sudoku
Halloween Sudoku
Mermaid Sudoku
Christmas Sudoku
Valentine Sudoku
Coffee Mahjong
Halloween Mahjong
Fruit Mahjong
Mermaid Mahjong
Office Mahjong
Valentine Mahjong
Diamond Mine Mathjong
Doggy Mathjong
Egg Mathjong
Fish Mathjong
Four Winds Mathjong
Heart Mathjong
To suggest an improvement, or just say hi, please contact me on twitter :-)

Follow @battagline or  Tweet to @battagline

Thanks,
Rick