Canvas drawImage () no funciona

Este código Javascript dibuja parte de la image en el 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); 

Pero cuando descomenta las líneas medias para establecer el ancho y el alto del canvas, el drawImage () no funciona. ¿Qué debo verificar para encontrar el problema?

Debes esperar a que el browser cargue la image .

Utilice el evento onload si la image aún no se ha cargado y cambie su código a algo como esto:

 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; } 

Vea esta demostración de trabajo

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

Intenta nombrar algo diferente a la variable. También asegúrese de que se cargue alguna image.

Prueba mi violín http://jsfiddle.net/aliasm2k/tAum2/ para get más ideas

Los attributes de ancho y alto de la image no se configuran hasta que se carga la image, por lo que le sugiero que coloque su código en el evento de image onLoad ().