efficient way to combine or layer Image objects?

[twuky]

Hi there - not so much a bug as a question,

I've been toying around with a little image editor project. Originally I was just using the Canvas api, but I found this library seems to handle individual pixel writes much faster than canvases putImgData(), which is pretty much the primary concern for my use case. it also has the advantage of allowing the backend image editing to not rely on a browser-only api.
I have basic support for layers where each layer now has a cached Image object, and I'd like to "squash" them into a single image for exporting.
This is my first-guess approach using this library (and i know this example doesnt properly account for adding semitransparent pixels). My guess is that is that this is a pretty naive way to solve this, and performance with large images seems to confirm that.

let buffer = new Image({width: this.width, height: this.height})
// initialize as transparent
for (let i = 0; i < buffer.size; i++) {
  buffer.setPixel(i, [0,0,0,0])
}
    
for (let i = 0; i < this.layers.length; i++) {
  const layer = this.layers[i]
  if(layer.visible && layer.image) {
    let size = layer.image.size
    for (let p = 0; p < size; p++) {
      let c = layer.image.getPixel(p)
      if (c[3] != 0) {
        buffer.setPixel(p, c)
      }
  }
}

return buffer.toDataURL()

in my Canvas approach, each layer was cached as a Canvas object and I could .drawImage(layer.canvas) to combine, which seemed to work pretty quickly. I assume that I may be missing a part of the library that could help with this - Stack looked like an option, but min/max/etc aren't the operations I need. Any thoughts on if there's a better way to approach this?

[lpatiny]

I currently don't see a better approach but it is a user to keep in mind and to check how it could be done with Region Of Interests (ROIs).