Use HTML5 Canvas to draw and manipulate images

One of the goodies in HTML5 is it allows you to use the <canvas></canvas> tag pair to draw or manipulate images on it. But not all browsers support the HTML5 Canvas. To have a canvas displayed on your browser, you can simply have the following HTML code.

<canvas id="myDrawingCanvas" width="900" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>

And you can then add or draw images onto the canvas by using JavaScript. For example the JavaScript code below allows the drawing of an image onto the canvas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var drawingCanvas = document.getElementById('myDrawingCanvas');
 
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
	// Initaliase a 2-dimensional drawing context
	var context = drawingCanvas.getContext('2d');
 
	//Canvas commands go here
	var imgObj = new Image();
	imgObj.onload = function () {			
		// Draw the image on the canvas
		context.drawImage(imgObj, 10, 10, 150, 150);
	}
 
	imgObj.src='/images/test.jpg';
 
}

I’ve made a complete page that adds five images from AskAlexia.com onto the Canvas, one by one, placed side by side, once the user clicks on the “Add Image to Canvas” button. And it’ll stop adding while it’s added all 5 images. The complete code as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
	<head>
	<title>Draw on a Canvas using HTML 5</title>
	<style>
	body {font-family:verdana,arial;font-size:9pt;}
	</style>
	<script type="text/javascript">
	var imgNo=0;
 
	var imgs=new Array ('http://askalexia.com/wp-content/uploads/2010/08/Magicooler-scarf-150x150.jpg',
	'http://askalexia.com/wp-content/uploads/2010/08/apple_ipad_bumper-case-150x150.jpg',
	'http://askalexia.com/wp-content/uploads/2010/08/Nokia-5250-handset-150x150.jpg',
	'http://askalexia.com/wp-content/uploads/2010/08/Fly-Q200-Swivel-Phone-150x150.jpg',
	'http://askalexia.com/wp-content/uploads/2010/08/Exercise-watch-150x150.jpg');
 
 
	function addToCanvas()
	{
		if (imgNo>= imgs.length)
		{
			alert("You've reached maximum images allowed to add on this canvas!!");
			return ;
		}
 
		var drawingCanvas = document.getElementById('myDrawingCanvas');
 
		// Check the element is in the DOM and the browser supports canvas
		if(drawingCanvas.getContext) {
			// Initaliase a 2-dimensional drawing context
			var context = drawingCanvas.getContext('2d');
 
			//Canvas commands go here
			var imgObj = new Image();
			imgObj.onload = function () {			
				// Draw the image on the canvas
				var nxtWidth=10+ (imgNo*155);
				context.drawImage(imgObj, nxtWidth, 10, 150, 150);
			}
 
			// Loading an external image from askalexia.com
			imgObj.src=imgs[imgNo];
			imgNo++;
 
		}
 
	}
	</script>
	</head>
<body><center>
<div style="width:1000px;text-align:left;padding:3px;border:12px solid #eee;">
<canvas id="myDrawingCanvas" width="900" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
<input type="button" value="Add Image to Canvas" onClick="addToCanvas()"/>
</div>
</center></body>
</html>

You can test out the example here. You can also use some other functions such as drawing arc, circle, lines, rectangles etc onto the canvas. Thinkvitamin has more complete examples.

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Use HTML5 Canvas to draw and manipulate images”


  1. No Comments

Leave a Reply

You must login to post a comment.