The element is an HTML5 standard (2014).
draw image on canvas
I am trying to put an image on a canvas. I read the following tutorial https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images and tried to do something similar to it my canvas is and I have created the function
function putImage() < var img = new Image(); img.src = "./path.png"; var ctx = document.getElementById('canvas').getContext('2d'); ctx.drawImage(img,8,8); >
but the image is not appearing on the canvas. I have printed the image path and it is correct, so I was able to eliminate this issue. any suggestions? thanks
Follow
44 4 4 bronze badges
asked Mar 11, 2013 at 7:26
Quantico Quantico
2,398 7 7 gold badges 36 36 silver badges 59 59 bronze badges
Are you sure the image path is correct? Are you getting any errors on the developer console/firebug?
Mar 11, 2013 at 7:31
yes 100% sure i printed it to the console and it is the right path “./dir/image.png” no errors in the console
Mar 11, 2013 at 7:48
3 Answers 3
Sorted by: Reset to default
According to the tutorial, you’re supposed to wrap your ctx.drawImage() inside img.onload like so
function draw() < var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function() < ctx.drawImage(img, 0, 0); >; img.src = '/files/4531/backdrop.png'; > I hope this helps.
Follow
3,957 1 1 gold badge 32 32 silver badges 42 42 bronze badges
answered Mar 11, 2013 at 7:51
Hass Hass
1,627 1 1 gold badge 18 18 silver badges 31 31 bronze badges
To elaborate why you have to do this: When you set the .src attribute of an image, the image is requested from the server, but the program doesn’t wait until the image has loaded. It keeps running, and when it comes to a ctx.drawImage method call which requires the not yet loaded image, it ignores this call.
Mar 11, 2013 at 9:24
Which is why you have to wait for the image to load, then give it a callback function which then draws the image now that it’s loaded
Syntax
Position the image on the canvas:
| context.drawImage(img, x, y) |
Position the image on the canvas, and specify width and height of the image:
| context.drawImage(img, x, y, width, height) |
Clip the image and position the clipped part on the canvas:
| context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height) |
Parameter Values
| Param | Description | Play it |
|---|---|---|
| img | Specifies the image, canvas, or video element to use | |
| sx | Optional. The x coordinate where to start clipping | Play it » |
| sy | Optional. The y coordinate where to start clipping | Play it » |
| swidth | Optional. The width of the clipped image | Play it » |
| sheight | Optional. The height of the clipped image | Play it » |
| x | The x coordinate where to place the image on the canvas | Play it » |
| y | The y coordinate where to place the image on the canvas | Play it » |
| width | Optional. The width of the image to use (stretch or reduce the image) | Play it » |
| height | Optional. The height of the image to use (stretch or reduce the image) | Play it » |
| NONE |
More Examples
Example
Position the image on the canvas, and specify width and height of the image:
const canvas = document.getElementById(“myCanvas”);
const ctx = canvas.getContext(“2d”);
const img = document.getElementById(“scream”);
ctx.drawImage(img, 10, 10, 150, 180);
Example
Clip the image and position the clipped part on the canvas:
const canvas = document.getElementById(“myCanvas”);
const ctx = canvas.getContext(“2d”);
const img = document.getElementById(“scream”);
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
Example
Video to use (press Play to start the demonstration):
JavaScript (the code draws the current frame of the video every 20 millisecond):
const video = document.getElementById(“video1”);
const canvas = document.getElementById(“myCanvas”);
ctx = canvas.getContext(‘2d’);
v.addEventListener(‘play’, function() , 20);>, false);
video.addEventListener(‘pause’, function() , false);
video.addEventListener(‘ended’, function() , false);
