자바 스크립트 변경 이미지 onclick

var canvas = this.__canvas = new fabric.StaticCanvas('c');
 
 fabric.Image.fromURL('Gold_001A.png', function(img) {

    canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage2' }).scale(1));
  });
  
  fabric.Image.fromURL('Gold_001B.png', function(img) {
    canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage' }).scale(1));
  });
  
/* Funtion for updating image 
@param {string}{imageName} Image name or image url for loading and updating
*/
function updateImage(imageName){
	fabric.Image.fromURL(imageName, function(img) {
		var object= getImageObjectUsingId('theImage');
		  canvas.remove(object);
		canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage' }).scale(1));
  });

}

/* Function for getting perticular object for updating the images
@param {String}{id} Object Id for selecting object . Same as use while creating object
*/
function getImageObjectUsingId(id){
	var listOfObjects= canvas.getObjects();
	for(var i=0; i< listOfObjects.length; i++){
		if(listOfObjects[i].id==id){
			return listOfObjects[i];
		}
	}

}

<table width="100%" border="0">
  <tbody>
    <tr>
      <td align="center" valign="middle"><table width="600" border="0">
        <tbody>
          <tr>
            <td align="center" valign="middle"><canvas id="c" width="800" height="800" class="lower-canvas" style="width: 800px; height: 800px;"></canvas>
</td>
          </tr>
          <tr>
            <td align="center" valign="middle"><table width="600" border="0">
              <tbody>
                <tr>
                <!--update image for updating image using updateImage function and pass iamge name or url in that funtion-->
                  <td align="center" valign="middle"><a href="#" onclick="updateImage('816_Gabi_white.png')"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_GOLD.jpg" width="200" height="200" alt=""></a></td>
                  <td align="center" valign="middle"><a href="#" onclick="updateImage('816_Gabi_kolory_MIEDZ.jpg')"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_MIEDZ.jpg" width="200" height="200" alt=""></a></td>
                  <td align="center" valign="middle"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_STAL.jpg" width="200" height="200" alt=""></td>
                </tr>
              </tbody>
            </table></td>
          </tr>
          <tr>
            <td align="center" valign="middle">&nbsp;</td>
          </tr>
        </tbody>
      </table></td>
    </tr>
  </tbody>
</table>