Canvas drawImage() not working

Question

This Javascript code draw part of the image on the canvas:

var img = document.getElementById('img');
var canvas = document.getElementById('can');
//canvas.width = img.width;
//canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

But when I uncomment the middle lines to set the canvas width and height, the drawImage() does not work. What should I check in order to find the problem?

Why do you think that uncommenting produced the problem? – Joe Sep 17 '13 at 14:41 — Joe, Sep 17 '13 at 14:41

letiagoalves · Answer 1 · 2013-09-17T14:16:12.633

16

You need to wait for the browser to load the image.

Use onload event if image was not yet loaded and change your code to something like this:

var img = document.getElementById('img');
var canvas = document.getElementById('can');
var ctx = canvas.getContext("2d");

var callback = function(image) {
   if(!image) image = this;
   canvas.width = img.width;
   canvas.height = img.height;
   ctx.drawImage(image, 0, 0);
}

if(img.complete) { //check if image was already loaded by the browser
   callback(img);
}else {
   img.onload = callback;
}

See this working demo

edited Sep 17 '13 at 14:16

answered Sep 17 '13 at 14:10

letiagoalves

11,224
4
40
66

will this work if image was already loaded before binding onload – sabithpocker Sep 17 '13 at 14:12
1

@sabithpocker i updated my answer to check is it was already loaded. now it works on both cases. – letiagoalves Sep 17 '13 at 14:16
I already called the code from img.onload = function() { ... } – Joe Sep 17 '13 at 14:33
@Joe what do you mean? – letiagoalves Sep 17 '13 at 14:34
I mean that the problem happens inside the callback – Joe Sep 17 '13 at 14:38
@Joe See this demo: http://jsfiddle.net/mf4SW/. Use the same login and tell me how it worked. Also don't forget this check: `if(!image) image = this;` – letiagoalves Sep 17 '13 at 14:40

score 0 · Answer 2 · answered Sep 17 '13 at 14:07

0

var img = document.getElementById('img');

Try naming the variable something else. Also make sure some image is loaded.

Try my fiddle http://jsfiddle.net/aliasm2k/tAum2/ for more ideas

answered Sep 17 '13 at 14:07

score 0 · Answer 3 · answered Sep 17 '13 at 14:11

0

The width and height image attributes aren't set until the image is loaded, so i propose you to put your code in onLoad() image event.

answered Sep 17 '13 at 14:11

Arnau Lacambra

130
1
7

Canvas drawImage() not working

3 Answers3