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

Issue

This Content is from Stack Overflow. Question asked by le0_

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();
}



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?