HTML5 Canvas Images

Test Your Skill

Q. Which of the following input type was not introduced with HTML5.
URLSearchmultipleEmail

View all questions...

HTML5 Canvas Images

The Canvas drawing context provides lots of method for drawing images on the canvas. Methods that are available with image will make you realize the power HTML5.

Method	Description
drawImage(image,x,y)	This method takes the image and draws it on the canvas. The coordinate x, y defines the position of image from the top-left corner of Canvas.
drawImage(image,x,y,dw,dh)	This method takes the image, scale it to width of dw and height dh, draws it on the canvas at the co-ordinate (x,y).
drawImage(image,rx,ry,rw,rh, x,y,dw,dh)	This method takes the image, clips it to the rectangle (rx,ry,rw,rh). Scales it to dimension (dw,dh) and draws it on the canvas at coordinate (x,y)

Below sample show how to draw image on the canvas.

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

window.onload = function () {

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

var image = document.getElementById('imgSampleImage');

cxt.drawImage(image, 0, 0);

}

</script>

</body>

</html>

Try it yourself

This is a very basic example of using image inside canvas. After getting the content of the canvas, image object is stored in variable and passed to the drawImage method of context.

Sample to resize the image to required size.

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

window.onload = function () {

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

var image = document.getElementById('imgSampleImage');

cxt.drawImage(image, 100, 100, 40, 40);

}

</script>

</body>

</html>

Try it yourself

In this sample image is re-sized to (40x40) from (150x150).

Sample to re-size and crop the image at the same time

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

window.onload = function () {

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

var image = document.getElementById('imgSampleImage');

cxt.drawImage(image, 30, 20, 100, 100, 100, 100, 100, 100);

}

</script>

</body>

</html>

Try it yourself

In this example image is first cropped to a rectangle (30, 20,100,100) i.e. starting from point x= 30 and y = 20, move 100 from left to right and 100 from top to bottom. Then draw this on the canvas starting at location(100,100) with width = 100 and height = 100;

<< Previous

Next >>

Comments

JonalynPosted on: 5/11/2011 10:14:09 PM

Wow, that is a really cool HTML5 feature ... :)

peterPosted on: 10/27/2011 5:33:46 AM

Mistake. Image is full, only user see small image. This, you can do by img.widht, height.
Try use src=...base64...
img = new Image();
img.src = "...base64..."
canvas = document.createElement('canvas');
context = canvas.getContext('2d');
canvas.width = 20;
canvas.height = 20;
context.drawImage(img,0,0,info.width,info.height);
document.write(canvas.toDataURL("image/png")); //return original img.src

peterPosted on: 10/27/2011 5:34:38 AM

info.width,info.height = 20, 20; img.width = about 100, 100

Add Comment

Comment

Name
(Required)

E-mail (Privacy assured)
(Required)

Subscribe to this site by email

Test Your Skill

Add Comment

Poll of the Day

Related Contents

Online Test Papers

Related Tutorials

Fun @ Work

Top Blogs