Did you find this useful?
Socialize it today.


HTML5 Canvas: Images

Saturday, October 27, 2012

The HTML5 Canvas provides you with the ability to draw lines, shapes, text, and images as well In this tutorial, we will cover the drawImage() method and show some examples on how this method can be used to draw images onto the HTML5 canvas.


Usage

To draw an image onto the HTML5 Canvas, we can use the drawImage() method which requires an image object and a destination point. The destination point is relative to the top left corner of the image. The drawImage() method requires an image object. In our JavaScript block, we must create an image and once it is loaded, we draw the image onto the HTML5 canvas.


Syntax

Draw the Image onto the canvas

context.drawImage(img,x,y);

Draw the image on the canvas, and specify width and height of the image

context.drawImage(img,x,y,width,height);

Crop the image and draw the cropped portion on the canvas

context.drawImage(img,cx,cy,cwidth,cheight,x,y,width,height);


ParameterDescription
imgSpecifies the image to use
sxOptional. The x coordinate where to start cropping
syOptional. The y coordinate where to start cropping
swidthOptional. Width of the cropping image
sheightOptional. Height of the cropping image
xThe x coordinate where to place the image on the canvas
yThe y coordinate where to place the image on the canvas
widthOptional. The width of the image to use
heightOptional. The height of the image to use



Examples

We will use the following picture for the next three examples. The first example is the most basic one where the image is simply drawn on the canvas element. The second example will draw the image according to the dimensions provided. The third example crops the image and draws the results.


<canvas id="myCanvas" width="287" height="374">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.onload = function () {
        context.drawImage(imageObj, 10, 10);
    };
    imageObj.src = 'monalisa.jpg'
    </script>



Your browser does not support the HTML5 canvas tag.


Draw the image on the canvas, and specify width and height of the image.

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.onload = function () {
        context.drawImage(imageObj, 60, 60, 167, 254);
    };
    imageObj.src = 'monalisa.jpg'
    </script>



Your browser does not support the HTML5 canvas tag.


Crop the image and draw the cropped portion on the canvas.

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.onload = function () {
        context.drawImage(imageObj, 70, 5, 125 ,125, 19, 62, 250, 250);
    };
    imageObj.src = 'monalisa.jpg'
    </script>



Your browser does not support the HTML5 canvas tag.


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Definitive Guide to HTML5 Head First HTML5 Programming: Building Web Apps with JavaScript Murachs HTML5 and CSS3