javascript / canvas5 error from simple code

Question

Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://127.0.11.1/test/canvas5_b.php :: 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;

Both the images are in the right folder. The thing that gets me is that it works if you put a alert(meter); before line 27. Its as if it is not loaded, but I have it running on window.onload, so I dont see how that is.

edit : It is an issue of when the image is loaded (ty rob). It appears best to globally declare and set the image src, and then call window.onload = setup, like this : (correct me if this is bad)

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;

rob · Accepted Answer · 2010-11-15 21:10:45Z

2

Make sure the images are loaded first. For instance:

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

answered Nov 15, 2010 at 21:10

rob

10.2k7 gold badges44 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jason Over a year ago

I thought img.onload wouldnt fire after img.src, since its already loaded. Will have to test this.

rob Over a year ago

I just rearranged it above to account for that.

PleaseStand · Accepted Answer · 2010-11-15 21:21:23Z

0

It's likely that the delay introduced by alert is enough to allow the image to load, but without alert, the images have not loaded in time. Try drawing the images onto the canvas only once they have loaded:

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;

answered Nov 15, 2010 at 21:21

PleaseStand

32.2k7 gold badges72 silver badges96 bronze badges

5 Comments

jason Over a year ago

Would maybeDraw be called 2 times? Or fail on the first try since the other image isnt loaded yet?

PleaseStand Over a year ago

@jason: Yes, it would be called two times, but the if statement checks to see if both images have loaded. (When maybeDraw runs, it sets either meter.loaded = true; or meter_bar.loaded = true;, depending on which one it is.)

jason Over a year ago

ahh i see what you did there. So what if theres a bajillion images to load.... Im thinking one way to do it would be set the biggest image to the last one loaded, and on its onload, call maybeDraw(), but I suspect that in some situations that wouldnt work, and its certianly not elegant.

PleaseStand Over a year ago

@jason: In that case, I might consider incrementing a counter for every successful load, then once the counter reaches the number of images that must be loaded, draw the images onto the canvas.

jason Over a year ago

Late last night I reached this conclusion! Great minds think alike!

Collectives™ on Stack Overflow

javascript / canvas5 error from simple code

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related