Canvas drawImage(2)

by MICHI CHEN

HTML

<canvas id="myCanvas" width="600" height="600"></canvas>

JavaScript

$(function(){
	function loadedImg(sources,callback){
    var imgs={};
    var loadedImgs=0;
    var imgsTotal=0;
    for(var src in sources){
    	imgsTotal++;
    };
    for(var src in sources){
    	imgs[src]=new Image();
      console.log(imgs[src]);
      imgs[src].onload=function(){
      	if(++loadedImgs>=imgsTotal){
        	callback(imgs);
        };
      };
      imgs[src].src=sources[src];
    };
  };
	var cxt=$('#myCanvas')[0].getContext('2d');
  var imgLink={
  	photo1:'https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg',
    photo2:'https://c3.staticflickr.com/1/469/18010094874_0b037901e4_k.jpg'
  };
  loadedImg(imgLink,function(imgs){
  	cxt.drawImage(imgs.photo1,10,10,200,200);
    cxt.drawImage(imgs.photo2,10,220,200,200);
  });
});