Paint function in p5.js is not retaining pixel changes on canvas

I am trying to create an image editing tool using p5.js. I have created a paint function using which user can fill selected color inside the shape. The shapes are drawn using a separate line drawing functionality and when we click on the shape, it gives us access to an object selectedObject using a function called getObjectAtMouse Current Behavior: After selecting color and clicking inside the shape, the shape is getting filled with required color but after scrolling the canvas, the applied paint gets disappeared. Required Behavior: After filling the shape with color and scrolling the canvas, the paint should not disappear.

Below is the code I have implemented

// inside mousepressed and draw, I have included this function
if (this.subMenuSelection == "menuPaint") {
        console.log('paint inside draw');
        let objectAtMouse = this.getObjectAtMouse(p5.mouseX, p5.mouseY);
        if (objectAtMouse) {
          let positionArray = objectAtMouse.Position;
          let uniquePositionArray = [];
          uniquePositionArray = positionArray.filter((value, index, self) =>
            index === self.findIndex((t) => (
              t.x === value.x && t.y === value.y
            ))
          )
          console.log('the unique position array is', uniquePositionArray);
          let len = uniquePositionArray.length;
          console.log('the object position is ', positionArray);
          p5.push();
          p5.loadPixels();
          p5.fill(this.paletteColor);
          p5.beginShape();
          for (let i = 0; i < len; i++) {
            p5.vertex(positionArray[i].x, positionArray[i].y);
          };
          p5.endShape();
          p5.updatePixels();
          p5.pop();
}