Classical pitfall: you redeclare the variables in your methods, so they hide the class' fields. Just get rid of the int before x & y inside these functions.

I changed it but it does not solve my problem. The rectangle moves with the mouse and it does not take the size of the mouseReleased mouse position. I want it to take its fixed upper left corner corner position when I first click and its right bottom corner position when I release. I played a bit with the code. Here it is:

PImage imageA;

Pictures selectPartOfImage;

void setup () {

size (screen.width, screen.height);
background (230);

imageA=loadImage ("imageA.jpg");

selectPartOfImage = new Pictures (color(0, 0, 0, 0), 0, 0, 0, 0);
}


void draw () {

background (230);
image (imageA, 0, 0, width/4, height/4);


selectPartOfImage.mouseClicked();
selectPartOfImage.mouseReleased();


} // end of draw



class Pictures {

color clr; 
int x1, y1, x2, y2;

Pictures (color tempClr, int tempx1, int tempy1, int tempx2, int tempy2) {

    clr=tempClr;
    x1=tempx1;
    y1=tempy1;
    x2=tempx2;
    y2=tempy2;
       
  }  // end of the constructor

void mouseClicked() {
x1=mouseX;
y1=mouseY;
}

void mouseReleased() {
x2=mouseX;
y2=mouseY;
fill (0, 0, 0, 0); 
rect (x1, y1, x2, y2);
}

} // end class

You always call the methods that looks like needing to be called only on some events.
Perhaps something like:

1. void draw () {
2. background (230);
3. image (imageA, 0, 0, width/4, height/4);
4. }
5. 
   
6. void mouseClicked() {
7. selectPartOfImage.mouseClicked();
8. }
9. 
   
10. void mouseReleased() {
11. selectPartOfImage.mouseReleased();
12. }