HI,
In html5 canvas, I want to display an array of 4 related walking images one at a time to simulate movement. I can do this but not when I use classes as below. I get no error but no output? The code loops as required but I just cant display any array element.

It is the ClassLoadImages.prototype.m_draw which is the issue.

I have been to other forums but no one can solve this .

Code:
   <canvas id="myCanvas" width="600" height="400"></canvas>
   <script>
  var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
   var j=0;
	
	var imgLoaded = 0;
	var x=0,y=0;
	var fi=0;
	
/////////////////////////////////////////////////////////////	
function ClassLoadImages(startx,starty) {
 // var img1 = new Image();
 
  var arr1 = [];
  var images=[];
  var ii=0;
 // var imgElement=[];
  this.x=startx;
  this.y=starty;
  this.imgElement=[];
 

 	arr1[0] = "images/bcave1.png";
	arr1[1] = "images/bcave2.png";
	arr1[2] = "images/bcave3.png";
	arr1[3] = "images/bcave4.png";

	

  onImgLoad = function() {
  // alert(imgLoaded);
     imgLoaded++;
	
     if(imgLoaded == 4) //all loaded
  	 {
  	
		//alert(imgLoaded);
      gameLoop = setInterval(doGameLoop, 100);
	//return ;	 
 	  }
   };//img1.onload
   
   
   for (i=0;i<arr1.length;i++){
		
		//alert(i);
		images[i] = new Image();
 		images[i].onload = onImgLoad;
 		images[i].src = arr1[i];
		this.imgElement[i] = images[i];
		
	}

};//func ClassLoadImages

  
  ClassLoadImages.prototype.m_draw = function(fi){
   // this.x++;
   // this.y++;
   
   	ii++; 
		//images[ii].x++;
    if (ii==4){
		ii=0;
	}
    ctx.drawImage(this.imgElement[fi],  30,   30);
     // ctx.fillText("finished loading " ,10,40);
  };
  
////////////////////////////////////////////////////////////////
	
	function doGameLoop() {
		
        ctx.clearRect(0,0,600,400);
		
		if(fi==4) {fi=0;}
		
		img.m_draw(fi);
        fi++;
     }



	var img= new ClassLoadImages(30,30);

    </script>