Question

I have the following function, which I’m using to load images from the hidden section in my HTML into a JavaScript array:

window.onload = function(){
console.log("src " + document.getElementById("building").src);
    var sources = {};
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        //sources[2] = document.getElementById("drink").src

    loadImages(sources, drawImage);
};

Once the images have been loaded into the JS array, I call the ‘loadImages’ function:

function loadImages(sources, callback){
    var imagesDir = "";
    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    console.log("length " + sources.length);
    for (var src in sources){
        numImages++;
    }
    console.log("Num Images " + numImages);

    var index=0;
    console.log("length " + sources.length);
    for (index=0;index < numImages ;index++){
        console.log(index);
        images[index] = new Image();
        images[index].src = imagesDir + sources[index];
        console.log("Adding " + sources[index]);
        callback(images[index]);
    }

    stage.add(imagesLayer); // should only be added once!!
}

which, in turn, calls the drawImage() method:

function drawImage(imageObj) {
    //var layer = new Kinetic.Layer();

    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,
      // puts the image in teh middle of the canvas
      x: stage.getWidth() / 2 - 50 / 2,
      y: stage.getHeight() / 2 - 50 / 2,
      draggable: true
    });

    // add cursor styling
    canvasImage.on('mouseover', function() {
      document.body.style.cursor = 'pointer';
    });
    canvasImage.on('mouseout', function() {
      document.body.style.cursor = 'default';
    });

    imagesLayer.add(canvasImage);
  }

This method draws the images to the centre of the canvas, and sets their ‘draggable’ property to true, so that they can be dragged and dropped around the canvas.

The JavaScript is all in the of my page, and in the I have a hidden section, where all of the images I want to draw to canvas are being loaded first. I’ve done this because it makes the images load and display in the browser much more quickly than if you load them directly from the source into the JavaScript.

The images are loaded with the following HTML:

<img id="building" src="images/assets/building.png" alt="Asset" />
<img id="chair" src="images/assets/chair.gif" alt="Asset" />
<img id="drink" src="images/assets/drink.gif" alt="Asset" />
<img id="food" src = "images/assets/food.gif" alt="Asset"/>

and I am loading around 40 or so images into the HTML

Currently I have this drawing two images to the canvas, “building” and “chair”, but for some reason, when I uncomment the line sources[2] = document.getElementById("drink").src to draw the third image to the canvas, and view the page in the browser, my canvas doesn’t display on the screen, and I get a console error that says,

uncaught exception: [Exception… “Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]” nsresult: “0x80040111 (NS_ERROR_NOT_AVAILABLE)” location: “JS frame :: http://www.html5canvastutorials.com/libraries/kinetic-v4.1.2.js :: :: line 4222″ data: no]

I am using the Kinetic.js library (http://kineticjs.com/), and it appears to me as if this error is in the library…

Does anyone know if this is the case? Or is there something that I’m doing wrong in my code that’s causing this error to occur?

Answer 1

It’s not an error in the library, it’s an error with that image. Either it’s getting the wrong src property or that image doesn’t exist at that location. Make sure you’ve got the url, filetype/name correct.