Canvas reference: How to use the canvas drawImage function

Summary
The canvas drawImage function allows you to add images to your scene. You can also use this function to add videos to your canvas tags. You can add whole images/videos or just parts of them to your canvas.

An example of drawing an image on the canvas (drawImage with 5 arguments)

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>

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>

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>

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 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.

See also: