HTML5 Recipes: Images

In this recipe, we shall take a look at how use the Canvas API to deal with images. There are some amazing demos available with the Canvas API that utilize the image to do all sorts of special effects, but we will keep it simple here in this Recipe. Our goal is to look at the basics first.

The Canvas API allows us to load draw an image anywhere on the canvas. The method that we will be looking at is the drawImage() method. The drawImage() can take several parameters:

  • drawImage(img,x,y): This method takes an image element and renders it starting at the x,y position specified, relative to the canvas.
  • drawImage(img,x,y,width,height) : This method takes an image element and will render the image starting at (x,y) position but within the constraints that you specific for width and height. The image could get stretched, compressed depending on the width and height that you specify. Think of thumbnails that you might want to generate.
  • drawImage(img,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight) : This method allows you to take an area of the image specified by the Source and render it on the canvas as defined by the Destination. Both the Source and Destination parameters are for the top-left (x,y) and the width, height respectively. This allows you to crop out a certain section of an image and render it somewhere. For e.g. Image a face detection algorithm that is able to magically mark the boundary that represents human faces. You could then extract them out and place them somewhere.

Note that the img can be of the following 3 types: HTMLImageElement, HTMLCanvasElement or HTMLVideoElement. The HTMLImageElement is the normal image element  that we all know about. The other two types should bring about interesting ideas for you. You can actually deal with a Canvas or a Video Element just like you would for an Image. This brings up interesting possibilities that you can now do with the Canvas API. Think of video snapshots, overlays, etc.

Sample code below that uses all the 3 overloaded drawImage() methods:

	<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Recipes</title>
<script>
function draw_image() {

 var canvasObj = document.getElementById("mycanvas");
 var canvasCtx = canvasObj.getContext("2d");
 var img = new Image();
 img.onload = function() {
     canvasCtx.drawImage(img,0,0);
     canvasCtx.drawImage(img,300,0,100,75);
     canvasCtx.drawImage(img,5,5,90,30,420,0,85,25);
 }
 img.src = "oreilly.png";

}

function clear_canvas() {
	var canvasObj = document.getElementById("mycanvas");
	//May not work in some browsers: Change the value and set it back to original
	//canvasObj.width = 10;
	//canvasObj.width = 200;
	var canvasCtx = canvasObj.getContext("2d");
	canvasCtx.clearRect(0,0,600,450);
}
</script>
</head>
<body>
    <div id="instructions">
     <a href="#" onclick="draw_image();return false">Click to draw an image</a>
     <a href="#" onclick="clear_canvas();return false">Click to clear</a>

    </div>
 <div id="drawingsurface">
  <canvas id="mycanvas" width="600" height="450"/>
 </div>
</body>
</html>

Let us go through the code. We define a canvas element with a width and height of 600 and 450 respectively. The main method to look at is draw_image(). In this method we get a handle to the 2D canvas. Then we simply create a standard HTML  element and assign a src image file i.e. “oreilly.png”, which the O’Reilly Inside RIA logo. Note that we assign an onload function to the image element, so that we execute our canvas calls only once the image has been completely loaded. Now we invoke each of the drawImage() methods. The first one simply renders the image, starting at the (0,0) position in the canvas. It means that the width and the height of the image source file will be used. The second one renders the same image, starting at (300,0) but it specifies a constraint i.e. width = 100 and height = 75. So when you run the code, you will see the image distortion happening, since we are compressing the image from its normal height and width. Finally, we have an interesting thing that we do in the third call to drawImage(). We are interested in extracting out the “O’Reilly” word. So first we specify the source (x,y,width and height) and then we specify where we want to render it on the Canvas with the last four parameters (x,y,width and height). Run the example to get a better idea.

See it in action here.


HTML5 Canvas Recipes

  1. Getting Started with Canvas
  2. Rectangles
  3. Strokes and Fills
  4. Drawing Text
  5. Paths
  6. Circles and Arcs
  7. Images
  8. Graphs With Canvas

Back to HTML5 Series

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s