HOW TO REPLACE PACMAN ICON WITH AN IMAGE? about pacman HOT 3 OPEN

  var ctx = getPacmanCanevasContext();
  
  ctx.fillStyle = "#fff200";
  ctx.beginPath();
  
  var startAngle = 0;
  var endAngle = 2 * Math.PI;
  var lineToX = PACMAN_POSITION_X;
  var lineToY = PACMAN_POSITION_Y;



      var img = document.getElementById("pacmanImage");
  if (PACMAN_DIRECTION === 1) {
	  img = document.getElementById("pacmanImageflipped");    //right
	  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
	  //startAngle = (0.35 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //endAngle = (1.65 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //lineToX -= 8;
  } else if (PACMAN_DIRECTION === 2) { 
	  img = document.getElementById("pacmanImagedown");          //down
	  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
	  //startAngle = (0.85 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //endAngle = (0.15 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //lineToY -= 8;
  } else if (PACMAN_DIRECTION === 3) { 			      //left
	  img = document.getElementById("pacmanImage");
	  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
	  //startAngle = (1.35 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //endAngle = (0.65 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //lineToX += 8;
  } else if (PACMAN_DIRECTION === 4) { 
	  img = document.getElementById("pacmanImage");    //up
	  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
	  //startAngle = (1.85 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //endAngle = (1.15 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //lineToY += 8;
  }
  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
  //ctx.arc(PACMAN_POSITION_X, PACMAN_POSITION_Y, PACMAN_SIZE, startAngle, endAngle, false);
  //ctx.lineTo(lineToX, lineToY);
  //ctx.fill();
  ctx.closePath();