Display image with canvas tag trouble

Question

I am new with jquery , i have a small project about display image with canvas. All will good , but i have a trouble when try display all image , i try to use .each(function) or loop but not work

This is my trouble , any one can help ?. Thanks

http://jsfiddle.net/NcKfr/6/

<textarea id="textid">blah  blah blah</textarea>



<canvas id="ca1" width="640" height="480"></canvas>

<script>
 $(document.body).find('*').each(function() {
    var tmp = $("textarea").children().remove();
    var text = $("textarea").text();
    text = text.replace(/<li>/g, "").replace(/<\/li>/g, "").replace(/<br \/>/g, "").replace(/\/>/g, "").replace(/<img/g, "").replace(/ /g, "");
    $("textarea").text(text);
    $("textarea").append(tmp);
    });
 </script>


Script code :

$(function(e) {


 var data = $("#textid").val();
  rows = data.split('src="');
  partNum = [];
  var i;
  var len = rows.length;
 var can = document.getElementsByTagName('canvas')[0];
 var ctx = can.getContext('2d');

    $(document).ready(function() {

  for (i = 1; i < len; i++) {
 partNum[i] = rows[i].substr(0,rows[i].indexOf('"'));
 $.getImageData({
            url: partNum[i],
            success: function(image) {

                // Set the canvas width and heigh to the same as the image
                $(can).attr('width', image.width);
                $(can).attr('height', image.height);
                $(can).css({
                    'background-color': 'none',
                    'border-color': '#fff'
                });

                // Draw the image on to the canvas
                ctx.drawImage(image, 0, 0, image.width, image.height);

            },
            error: function(xhr, text_status) {
                // Handle your error here
            }
        });

  }


    });


});


            success: function(image) {

  script = document.createElement('canvas'); var can = document.body.appendChild(script); 

If i change code in two line , i can show all image but i can control it load form 1 to 13. Any body can help me fix it ... thanks

Answer 1

Here is a code which will draw images on one canvas one under another.

var url = "http://farm4.static.flickr.com/",
    urls = [
      "3002/2758349058_ab6dc9cfdc_z.jpg",
      "2445/5852210343_d21767f18d.jpg"],
    can = $('#canvas').get(0),
    ctx = can.getContext('2d'),
    canH = 0,
    canW = 0,
    h = 0,
    images = [],
    size = urls.length;

// loop via all images
$.each(urls, function (index, img) {
  $.getImageData({
    url: url + img, 
    success: function (image) {
      images.push(image);
      canH += image.height;
      canW = Math.max(canW, image.width);   
      if (images.length === size) {   
        can.width = canW;
        can.height = canH;
        $.each(images, function (i, img) {
          ctx.drawImage(img, 0, h);
          h += img.height;
        });                
      }
    }
  });
});

You can also check this: http://jsfiddle.net/HcxG3/6/ (looks like the service behind getImageData is currently down).