I'm trying to combine layers of images into one image. It works fine when I have just one method to fetch the image then another and layers them together, The problem is I need to tint the image before I draw it and they have to be drawn in a certain order. When I introduced the Sharp library to tint images into a buffer and then load the buffer and draw things start to draw out of order

here is the code

const drawLayer = async (_layer, _edition) => {
  let element = _layer.elements[Math.floor(Math.random() * _layer.elements.length)];
  addAttributes(element, _layer);

  var path = `${_layer.location}${element.fileName}`;

  console.log("start " + path);
  const buffer = await sharp(`${_layer.location}${element.fileName}`).png().toBuffer();
  console.log("sharp done " + path);
  const image = await loadImage(buffer);
  console.log("load image done " + path);

  ctx.drawImage(
    image,
    _layer.position.x,
    _layer.position.y,
    _layer.size.width,
    _layer.size.height
  );
  console.log("saving edition " + _edition);
  saveLayer(canvas, _edition);
  console.log("\n\n");
};

function draw() {
  for (let i = 1; i <= edition; i++) {
    layers.forEach((layer) => {
      drawLayer(layer, i);
    });
    addMetadata(i);
    console.log("Creating edition " + i);
  }
}

If there is only one await call for example I just load the image this way

const image = await loadImage(path);

there is no problem

a second solution I can figure out is just use the sharp to load the image in a buffer but some how i need to turn that buffer back into either an image or canvas for this method

ctx.drawImage(
    image,
    _layer.position.x,
    _layer.position.y,
    _layer.size.width,
    _layer.size.height
  );