Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 53

after, you can also resize the image as you draw it. To simply draw the image, create the
following code:
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
var img = new Image();
img.src = "orange.jpg";
img.onload = function () {
ctxt.drawImage(img, 0, 0);
ctxt.stroke();
}
This code produces a <canvas> element with the image drawn on it, as shown in
Figure 1-39.
FIGURE 1-39 An image drawn on a canvas
If you want to resize the image, you can replace the drawImage method call with the
following line:
ctxt.drawImage(img, 0,0,img.width * .5, img.height * .5);
This reduces the image size by 50 percent.
Now look at how you can draw text on your canvas.
Drawing text
Drawing text on the canvas involves adding a few additional tools to your chest from the
context object, using the strokeText method and the font property. You see how to apply
color to your text and, finally, how to manage its alignment.
In its simplest form, drawing text requires only the following code:
ctxt.strokeText("1. Text with default font", 100, 100);