How to use the canvas drawImage function
- Arguments to the function
- An example with three arguments
- An example with five arguments
- An example with nine arguments
- Playing video with the drawImage function
- Using another canvas with the 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 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
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>
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.