exception when trying to draw images throught canvas

I am trying to draw the pictures that I fetched from Flickr through canvas and this is a snippet of my codes.

for(var i=0;i<document.getElementsByClassName("canvas").length;++i)
            {
                //randomly select one photo
                var picinfo = photos[Math.floor(Math.random()*photos.length)];
                var img = new Image(); 
                //get the pic URL
                img.src = "http://farm" + picinfo.farm + ".static.flickr.com/"
                + picinfo.server + "/" + picinfo.id + "_" + picinfo.secret + "_m.jpg";

                var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');

                console.log(img);

                // Draw slice
                ctx.drawImage(img, 10, 10);
                // Draw frame
                //ctx.drawImage(document.getElementById('frame'),132,150);
            }

it works until actually drawing the pictures

ctx.drawImage(img, 10, 10);

and it throws exception that I have no idea.

uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://localhost:8080/static/js/Gallery.js :: anonymous :: line 25" data: no]

I guess there is nothing wrong with the images fetching since I can see the fetched pictures in my Firebug like

<img src="http://farm6.static.flickr.com/5226/5624531777_4a05934fc1_m.jpg">

and helps? thank you in advance.

From your limited information its hard to test anything for you or repeat your error, but I think I can help.

NS_ERROR_NOT_AVAILABLE is probably from trying to do too many calls too quickly, but I'm not really sure.

Even if it isn't, we can take an earnest try at fixing this problem by rearranging your code a bit. Instead of rapid-fire going through each image, we will grab one image, wait for it to load, draw that image, then move on to the next one.

I have rearranged your code below, but have not tested it - you'll have to do that! - since I don't have all the pieces that you do.

It isn't necessarily the optimal way to go about it, but as written it should work

function drawOne(i) {
  //randomly select one photo
  var picinfo = photos[Math.floor(Math.random()*photos.length)];
  var img = new Image(); 
  //get the pic URL
  img.src = "http://farm" + picinfo.farm + ".static.flickr.com/"
  + picinfo.server + "/" + picinfo.id + "_" + picinfo.secret + "_m.jpg";

  // When the image is done loading this will execute
  img.onload = function() {
    var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');

    console.log(img);

    // Draw slice
    ctx.drawImage(img, 10, 10);
    // Draw frame
    //ctx.drawImage(document.getElementById('frame'),132,150);

    // we're done with this image? call drawOne again!
    // We may have to wait for a second here... but maybe not.
    i++;
    if (i !== document.getElementsByClassName("canvas").length) {
      drawOne(i);
    }
  }
}

// Get things started
drawOne(0);