I'm using PanoJS to create a platform that can view and modify huge images.

What i need to do is render image tiles on multiple canvas items, and change brightness, contrast, opacity when user drag the range selector.

But the problem is, when I run this updateTiles function, tiles are not updated one by one, they wait until all the tiles were updated and render together, AND, this loading function is not working as expected neither, this opacity change with loading element renders after all the tiles were updated too, that's not what I'm expecting..

Here are the codes I wrote about this senario, any idea how am I supposed to do to get what I want?

Thanks a lot!

...

PanoJS.prototype.updateTiles = function () {

  const handleCanvasUpdate = (element) => {
    const ctx = element.getContext('2d')
    const imgData = new ImageData(new Uint8ClampedArray(JSON.parse(element._imgData.data)), element._imgData.height, element._imgData.width)
    const changedImgData = this.changeImgData(imgData) // -1 ~ 1
    ctx.putImageData(changedImgData, 0, 0);
  }

  const tag = this.showLoading('updateTiles')
  for (let i = 0; i < this.well.children.length; i++) {
    const element = this.well.children[i];
    if (element.tagName.toUpperCase() === 'CANVAS') {
      handleCanvasUpdate(element)
    }
  }
  this.hideLoading(tag)
}

PanoJS.prototype.changeImgData = function (imgdata) {

  // this imgdata can be very large

  const data = imgdata.data;
  for (let i = 0; i < data.length; i += 4) {

    // brightness
    const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]);
    hsv[2] *= 1 + this.luminance;
    const rgb = this.hsv2rgb([...hsv]);
    data[i] = rgb[0];
    data[i + 1] = rgb[1];
    data[i + 2] = rgb[2];

    // contrast
    const _contrast = (this.contrast / 100) + 1;  //convert to decimal & shift range: [0..2]
    const intercept = 128 * (1 - _contrast);
    data[i] = data[i] * _contrast + intercept;
    data[i + 1] = data[i + 1] * _contrast + intercept;
    data[i + 2] = data[i + 2] * _contrast + intercept;

    // opacity
    data[i + 3] = data[i + 3] * this.opacity;

  }
  return imgdata;
}


PanoJS.prototype.showLoading = function (name) {
  counter++
  const tag = `${counter}${name}`
  console.time(tag)
  this.loadingMask.style.opacity = 1
  this.loadingCount++
  return tag
}

PanoJS.prototype.hideLoading = function (tag) {
  // requestAnimationFrame(() => {
  if (this.loadingCount) {
    this.loadingCount--
  }
  // console.log(this.loadingMask.style.opacity);
  if (this.loadingCount === 0) {
    this.loadingMask.style.opacity = 0
  }
  console.timeEnd(tag)
  // console.log(this.loadingCount);
  // })
}
...