How to use the canvas drawImage function

The drawImage() function can be used to draw images, videos or other canvas tags on to your canvas. If you start to use the function it may not appear to work - you need to note that the image must be loaded first before you draw it on to the canvas. Keep in mind that this may upset your applications code flow so your application needs to take into account that the image has to be loaded so that it can be drawn on the canvas. Once this has been done drawing can continue.

One option to account for this is to ensure that all necessary images are loaded before any drawing takes place. One possibility is to redraw the scene when the image is loaded (via a generic redraw() function).

Arguments to the function

The function has a variable number of arguments - it can be used by specifying 3, 5 or 9 arguments.

The function called with three arguments

• The image object (as returned by document.getElementById() )
• The X coordinate
• The Y coordinate

The function called with five arguments

• The image object (as returned by document.getElementById() )
• The X coordinate
• The Y coordinate
• The width to draw the image
• The height to draw the image

The function called with nine arguments

This variant of the function with 9 arguments allows you to select a portion of the image and use that. The selected area is then resized to fit the width and height that you specify. This allows you to select a section of your image to display. You should note the order of the arguments. The area to select X/Y/W/H comes before the displayed X/Y/W/H.

• The image object (as returned by document.getElementById() )
• The X coordinate of the area to select
• The Y coordinate of the area to select
• The width of the area to select
• The height of the area to select
• The X coordinate to draw the image at
• The Y coordinate to draw the image at
• The width to draw the image
• The height to draw the image

An example with three arguments

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        var img = new Image();
        img.src = '/images/logo.png';
        img.onload = function (e)
        {
            context.drawImage(img, 10, 10);
        }
    }
</script>

[No canvas support]

An example with five arguments

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        var img = new Image();
        img.src = '/logo.png';
        img.onload = function (e)
        {
            context.drawImage(img, 10, 10,256,256);
        }
    }
</script>

[No canvas support]

An example with nine arguments

This example shows the top left quarter of the image at a size of 64x64 (the regular image is 64x64).

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        var img = new Image();
        img.src = '/logo.png';
        img.onload = function (e)
        {
            context.drawImage(img, 0,0,32,32,10,10,64,64);
        }
    }
</script>

[No canvas support]

Playing video with the drawImage() function

As well as being able to add images to your canvas you can also use the drawImage() function to show video on your canvas. When used in conjunction with the other functions that canvas has (eg clip() scale() rotate() etc) you can make some interesting effects. One such effect is shown at the link below that allows you to select the video and move it around, all the time whilst the video is playing and rotating. There are other demonstrations available around the Internet.

Keep in mind though that if the browser doesn't recognise the codec that the video is using - it won't play the video. Fortunately the HTML5 video tag allows for multiple versions of the same video each with different codecs like this:

<video id="myVideo" loop style="display: none; width: 350px">
    <source src="/video/video.webm" type="video/webm">
    <source src="/video/video.ogg" type="video/ogg">
    <source src="/video/video.mp4" type="video/mp4">
</video>

Using another canvas with the drawImage() function

As well as an image or a video you can also use another canvas tag with the drawImage() function. This allows you to "copy" one canvas tags contents on to another. The canvas is treated as an image so if you scale it up you will encounter a blurring effect that may degrade the quality of the image. There's an example linked to below.