JavaScript/ошибка canvas5 от простого кода

Question

Ошибка: неперехваченное исключение: [Исключение ... "Компонент возвращается код ошибки: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" Location: «JS кадр: : нет http://127.0.11.1/test/canvas5_b.php :: настройки :: строка 27" данные: нет]

function setup() { 

    var e = document.getElementById("mycanvas"); 
    var ctx = e.getContext('2d'); 


    var meter = new Image(); 
    meter.src = "meter.jpg"; 
    var meter_bar = new Image(); 
    meter_bar.src = "meter_bar.jpg"; 
    //alert(meter); 

    ctx.beginPath();/////////LINE 27//////////// 
    ctx.drawImage(meter, 50, 100); 
    //ctx.globalCompositeOperation = "lighter"; 
    ctx.drawImage(meter_bar, 68, 123); 
    ctx.closePath(); 


} 

window.onload = setup; 

Оба изображений в нужной папке. То, что меня заводит, это то, что он работает, если вы ставите предупреждение (метр); перед строкой 27. Как будто она не загружена, но у меня она работает на window.onload, поэтому я не вижу, как это происходит.

Редактировать: Это проблема, когда изображение загружается (ty rob). Оказывается, лучше всего, чтобы глобально объявить и установить СРК изображения, а затем вызвать window.onload = установки, как это: (поправьте меня, если это плохо)

var img1, img2; 
img1 = new Image(); 
img2 = new Image(); 
//declare and set the images src 
img1.src = "meter.jpg"; 
img2.src = "meter_bar.jpg"; 

var canvasHeight, canvasWidth; 
canvasHeight = 300; 
canvasWidth= 600; 

var ctx; 


function setup() { 
    var e = document.getElementById("mycanvas"); 
    ctx = e.getContext('2d'); 
    draw(); 
} 

function draw() { 
    ctx.clearRect(0,0,canvasWidth, canvasHeight); 
    ctx.beginPath(); 
    ctx.drawImage(img1, 50, 100); 
    ctx.drawImage(img2, 68, 123); 
    ctx.closePath(); 
} 

window.onload = setup; 

Answer 1

Убедитесь, что изображения загружаются первым. Например:

var img = new Image(); 
img.onload = function(){ 
    ctx.drawImage(img,0,0); 
    } 

// put this after onload, otherwise onload may 
// not be called if image is in cache 
img.src = 'whatev.png'; 

Answer 2

Вполне вероятно, что задержка вводится alert достаточно, чтобы изображение для загрузки, но без alert, изображения не загружаются во времени. Попробуйте нарисовать изображения на холсте только после их загрузки:

function setup() { 

    function maybeDraw() { 
     this.loaded = true; 
     if(meter.loaded && meter_bar.loaded) { 
      ctx.beginPath(); 
      ctx.drawImage(meter, 50, 100); 
      //ctx.globalCompositeOperation = "lighter"; 
      ctx.drawImage(meter_bar, 68, 123); 
      ctx.closePath(); 
     } 
    } 

    var e = document.getElementById("mycanvas"); 
    var ctx = e.getContext('2d'); 

    var meter = new Image(); 
    var meter_bar = new Image(); 
    meter.onload = maybeDraw; 
    meter_bar.onload = maybeDraw; 
    meter.src = "meter.jpg"; 
    meter_bar.src = "meter_bar.jpg"; 

} 

window.onload = setup;