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