Resize “area” Tags Dynamically in HTML

Recently I have been working on a kind of interactive image where I needed to map the image and create areas.

I noticed that they do not change dynamically. I created a simple code that change the coords dynamically. I want to hear your thoughts about it since I searched a lot by did not find any related codes.

const getArea = document.querySelectorAll("area");
const getimg = document.querySelector(".myImg");
getArea.forEach(function (area) {
  const scaleWidth = getimg.width / getimg.naturalWidth;
  const scaleHeight = getimg.height / getimg.naturalHeight;
  coords = area.coords.split(",");
  const x = coords[0];
  const y = coords[1];
  const width = coords[2];
  const height = coords[3];
  area.coords = `${x*scaleHeight},${y*scaleWidth},${width* scaleWidth},${height* scaleHeight}`;
});