# Interactive shape masking with PGraphics

**URL:** <https://discourse.processing.org/t/interactive-shape-masking-with-pgraphics/29601>\
**Category:** Coding Questions\
**Created:** [April 24, 2021, 12:02pm UTC](https://discourse.processing.org/t/interactive-shape-masking-with-pgraphics/29601 "2021-04-24T12:02:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![PatJOAO](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/patjoao/32/12919_2.png) [@PatJOAO](https://discourse.processing.org/u/PatJOAO)\
**Post date:** [April 24, 2021, 12:02pm UTC](https://discourse.processing.org/t/interactive-shape-masking-with-pgraphics/29601/1 "2021-04-24T12:02:38Z")

</div>

Hi there!

Building up on a great post from the old forum: [https://forum.processing.org/two/discussion/comment/77997/#Comment\_77997](https://forum.processing.org/two/discussion/comment/77997/#Comment_77997)

shape. masking with PGraphics — was wondering if some one can give me a tip to how to add mouseX and mouseY to the masked shape? Was trying the following, but it seems that needs a bit more work.

```auto
PImage img; // Declare variable "a" of type PImage
PGraphics maskImage;

void setup() {
  
  size(800,600);

  img = loadImage("MyImage_1.jpg");
  // Create mask
  maskImage = createGraphics(width,height);
  maskImage.beginDraw();
  maskImage.rect(mouseX,mouseY, 300, 200);
  maskImage.endDraw();
  img.mask(maskImage);
}

```

Many thanks in advance!

---

<div class="post-metadata">

**Author:** ![PatJOAO](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/patjoao/32/12919_2.png) [@PatJOAO](https://discourse.processing.org/u/PatJOAO)\
**Post date:** [April 24, 2021, 12:32pm UTC](https://discourse.processing.org/t/interactive-shape-masking-with-pgraphics/29601/2 "2021-04-24T12:32:10Z")

</div>

Found an easy solution to obtain what I wanted:

```auto
PImage img; // Declare variable "a" of type PImage
PGraphics maskImage;

void setup() {
  
  size(800,600);

  img = loadImage("MyImage_1.jpg");
  
}

void draw() {
  
  // Create mask
  maskImage = createGraphics(width,height);
  maskImage.beginDraw();
  maskImage.rect(mouseX,mouseY, 300, 200);
  noStroke();
  maskImage.endDraw();
  img.mask(maskImage);
  fill(0);
  rect(0,0, width, height);
  image(img,0,0);
  
  
}

```