Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

492 CHAPTER 12 Drawing with HTML5

ctx.drawImage(img, 0, 0, 300, 400);

}

}

The result is shown in Figure 12-21. When providing the height and width, you should try

to maintain the proportions of the image to keep the image from being skewed to look very

skinny or very fat.

FIGURE 12-21 he image drawn with a reduced size so it fits within the canvasT

Keep in mind that you can draw your image and then overlay other shapes as necessary.

The following code demonstrates this by annotating the image.

function drawImage() {

var canvas = document.getElementById('myCanvas')

, ctx = canvas.getContext('2d');

var img = new Image();

img.src = “images/IceBoat.jpg";

img.onload = function () {

ctx.font = 'bold 24pt Arial';

ctx.drawImage(img, 175, 0, 450, 600);

ctx.strokeStyle = 'black';

ctx.lineWidth = 2;