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.
0 Responses to “Use HTML5 Canvas to draw and manipulate images”