NS_ERROR_NOT_AVAILABLE: Component is not available

Question

I have a problem. I am trying to draw an image onto a canvas. The image is not from the HTML page, but on a file. Here is the code i use:

var img = new Image();
img.src = "/images/logo.jpg";
this._canvas.drawImage(img, 300, 300);// this is line 14

now, here's the problem. This does not seem to work on Firefox and IE10 (I haven't tested yet on other browsers). On Firefox (21) I get:

[19:09:02.976] NS_ERROR_NOT_AVAILABLE: Component is not available @ file:///D:/Watermellon/scripts/base-classes.js:14

and on IE10 i get:

SCRIPT16389: Unspecified error. 
base-classes.js, line 14 character 13

The files and their directories are:

root/index.html  
root/scripts/base-classes.js  
root/images/logo.jpg 

Now when I change the img.src to a URL (an image from another site) everything works fine, the image draws itself after a delay(for it's get from the url). What am I doing wrong?

Answer 1

I'm guessing the problem is that the image isn't loaded yet before you attempt to use it. Try this:

var img = new Image();
img.onload = function () {
    this._canvas.drawImage(img, 300, 300);// this is line 14
};
img.src = "images/logo.jpg";

The src property is set after binding the event because a cached image's load event fires immediately (which is a common problem in IE).

And according to your structure, the path to the image would probably be images/logo.jpg (removing the first /)

Answer 2

You need to wait for the image to load before attempting to draw it into a canvas:

var img = new Image();
img.src = "/images/logo.jpg";
img.onload = function () {
  this._canvas.drawImage(img, 300, 300);// this is line 14
}