How to erase a shape without redrawing the entire surface? - c++

Question

On the screen below I have the image with the painted translucent rectangle and with the painted opaque rectangle - which cuts the area from translucent rectangle. Now it works because I redraw the surface and the translucent rectangle each time in the cycle, but working with slow computers this redrawing causes glaring. If I stop redrawing all this stuff, I get this result, but the glaring disappears:
The commented lines in code below cause the result at the picture
I want just to erase the the translucent rectangle without redrawing the entire surface. I want to dynamically select the area (without redrawing the entire surface each time) for making a screenshot like on the Windows 11
void OcctGtkViewer::buttonclick(int *x, int *y, int *width, int *height)
{
cairo_surface_t *surface = cairo_xlib_surface_create(xdisplay, xroot, DefaultVisual(xdisplay, scr), DisplayWidth(xdisplay, scr), DisplayHeight(xdisplay, scr));
cairo_t *cr = cairo_create(surface);
const char *backgroundImagePath = "/tmp/test.png";
cairo_surface_write_to_png(
surface,
backgroundImagePath);
cairo_surface_t *surfaceTmp = cairo_image_surface_create_from_png(backgroundImagePath);
cairo_set_source_rgba(cr, 0, 0, 0, 0.2);
cairo_rectangle(cr, 0, 0, DisplayWidth(xdisplay, scr), DisplayHeight(xdisplay, scr));
cairo_fill(cr);
cairo_surface_t *surfaceTmpp = cairo_image_surface_create_from_png(backgroundImagePath);
printf("select an area\n");
while (1)
{
event.type == MotionNotify && isPressed == true)
{
int tmp_x = xevent.xmotion.x_root;
int tmp_y = xevent.xmotion.y_root;
cairo_set_source_surface(cr, surfaceTmp, 1, 1);
// cairo_paint(cr);
cairo_set_fill_rule(cr, CAIRO_FILL_RULE_EVEN_ODD); // The default is CAIRO_FILL_RULE_WINDING.
// cairo_set_source_rgba(cr, 0, 0, 0, 0.2);
// cairo_rectangle(cr, 0, 0, DisplayWidth(xdisplay, scr), DisplayHeight(xdisplay, scr));
cairo_rectangle(cr, init_x, init_y, tmp_x - init_x, tmp_y - init_y); // set rectangle
cairo_fill(cr);
}
}
}