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

Question

Ошибка: неперехваченное исключение: [Exception ... »Компонент возвратил код ошибки: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]« nsresult: «0x80040111 (NS_ERROR_NOT_AVAILABLE» 1002: J2_1002 »)« J2 »:« 1002 »J2S2SLESLE):: setup :: line 27 "data: no]

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, поэтому я не вижу, как это.

edit: это проблема, когда изображение загружаетсяграбят).Лучше всего глобально объявить и установить src для изображения, а затем вызвать window.onload = setup, вот так: (поправьте меня, если это плохо)

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;