[help] Noob problem with canvas animation

[noobeyne]

Hello all,

 

I'm new to html 5 and making my first steps here, trying to understand what I'm doing.

So now i have a rather static game played on tiles that the user is supposed to slide, and I'm having this strange bug that i can't seem to come around for  afew days now:

 

To animate the sliding of tiles by the user, i am trying to delete the area where animation occurs, and then repeatedly repaint the slides moving in that area.

The problem is that there's also background underneath, and even though i first paint the bg and then the sliding icons, still i get only the background and not the icons.

When i don't paint the bg, the icons are there - so what must be happening is that the bg gets painted over the icons, instead of underneath.

Didi anyone have anything like it before?

 

Here's the code i'm using for that:

         	function switcher(xFrom,yFrom,xChange,yChange,isSuccess)	//switches between 2 icons; isSuccess defines if to keep the switch or go immediately back.         	{				var animOffset;							//variable to contain the animation offset in pixels, related to the start position				var xTo=xFrom+xChange;					//X of target icon				var yTo=yFrom+yChange;					//Y of target icon				var typeFrom;							//Type of source icon				var typeTo;								//Type of target icon				var switchTime=1000;					//minimum duration of switch animation in milliseconds				var endTime=startTime+switchTime;		//target minimum end time								//Logical Switch preparation				typeTo=boardTiles[xFrom][yFrom];				typeFrom=boardTiles[xTo][yTo];				//Graphic Switch				if (startTime==null) 				{					startTime=new Date().getTime();			//register the start of animation timestamp; getTime gets a fixed time while now changes with the clock				}				animate();								function animate()		//this is a recursive function 				{		  			animOffset=Math.ceil(((Date.now()-startTime)/switchTime)*cellSize);			  		render();	 				if (animOffset < cellSize) {		//animation still incomplete, continue rendering    					requestAnimationFrame(animate);					} else 						startTime=null;		//reset startTime so a new animation could later begin					}				}	         	function render()    	     	{						removeTile(xFrom,yFrom);						removeTile(xTo,yTo);                 		                drawTile(typeTo,xFrom,yFrom,animOffset*xChange,animOffset*yChange);						drawTile(typeFrom,xTo,yTo,-animOffset*xChange,-animOffset*yChange);	         	}          	}

The removeTile and drawTile functions are defined elsewhere, the following way:

			function drawTile(n,x,y,oX,oY)		//Graphically draws a tile (used during animation or as part of addTile). 			{										//n is the icon number, x,y are matrix coordinates for it to be placed, oX, oY are parameters for offset from x,y tiles				gameBoard.drawImage(icons[n],(xBoardStart+x*cellSize+oX),(yBoardStart+y*cellSize+oY)); //draw the tile on the canvas			}									function removeTile(x,y)			//removes icon from x,y by repainting the relevang bg section over it.			{				boardTiles[x][y]=0;				//mark the tile on the logical array as removed				gameBoard.drawImage(bg,(xBoardStart+x*cellSize),(yBoardStart+y*cellSize),cellSize,cellSize,(xBoardStart+x*cellSize),(yBoardStart+y*cellSize),cellSize,cellSize);			}

Any assistance would be appreciated...