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 function called with five arguments 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.

An example with three arguments

<script>
    canvas  = document.getElementById("cvs");
    context = canvas.getContext('2d');

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

An example with five arguments

<script>
    canvas  = document.getElementById("cvs");
    context = canvas.getContext('2d');

    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>
    canvas  = document.getElementById("cvs");
    context = canvas.getContext('2d');

    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.

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>

A full page example of playing the video tag with canvas is as follows: 

<html>
<body>

<video id="vid" autoplay muted loop controls style="position: absolute; visibility: hidden; z-index: -1000">
    <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>

<canvas id="cvs" width="400" height="400" style="border: 1px solid #000">[No canvas support]</canvas>

<script>
    canvas  = document.getElementById('cvs');
    context = canvas.getContext('2d');
    myVideo = document.getElementById('vid');
    
    // Set an interval that repeatedly draws the current video
    // frame onto the canvas. The interval function repeats every
    // 16.666 milliseconds so the result is that you get the
    // video playing on the canvas.
    setInterval(function ()
    {
        context.drawImage(myVideo, 50, 50, 200, 200);
    }, 16.666)
</script>

</body>
</html>

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.