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

Games

 

More Games

Calculation Solitaire
Colorado Solitaire
Cruel Solitaire
Freecell
Classic Solitaire
Scorpion Solitaire
space invaders
asteroids
sudoku
mathjong
mahjong words
reversi
Doggy Mahjong
Egg Mahjong
Fish Mahjong
Four Winds Mahjong
Heart Mahjong
Hourglass Mahjong
Sudoku
Candy Sudoku
Halloween Sudoku
Mermaid Sudoku
Christmas Sudoku
Valentine Sudoku
Coffee Mahjong
Halloween Mahjong
Fruit Mahjong
Mermaid Mahjong
Office Mahjong
Valentine Mahjong
Hour Glass Mathjong
House Mathjong
Classic Mathjong
Infinity Mathjong
Lines Mathjong
Little Pyramids Mathjong
To suggest an improvement, or just say hi, please contact me on twitter :-)

Follow @battagline or  Tweet to @battagline

Thanks,
Rick