# Using mask to reveal background image

**URL:** <https://discourse.processing.org/t/using-mask-to-reveal-background-image/25528>\
**Category:** Coding Questions\
**Created:** [November 19, 2020, 1:00pm UTC](https://discourse.processing.org/t/using-mask-to-reveal-background-image/25528 "2020-11-19T13:00:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![andypurbrick](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@andypurbrick](https://discourse.processing.org/u/andypurbrick)\
**Post date:** [November 19, 2020, 1:00pm UTC](https://discourse.processing.org/t/using-mask-to-reveal-background-image/25528/1 "2020-11-19T13:00:07Z")

</div>

Hi, I’m trying to write a sketch that uses mask to temporarily reveal a background/bottom image when the mouse pointer moves but does not permanently draw over it.

I have a sketch written based on reading docs and looking at other people’s code but I can’t get it working. I can see that I have created the mask layer but I am struggling to get the background image to display in the ellipse.

[My sketch in editor](https://editor.p5js.org/andy-pewter/sketches/smF_ERqMV)

```auto
var bgImage, topImage, mask;

function preload() {
  bgImage = loadImage(
    'https://mbkassets.s3-eu-west-1.amazonaws.com/dev/andy/TexturesCom_Camouflage0018_seamless_S.jpg'
  );
  topImage = loadImage(
    'https://mbkassets.s3-eu-west-1.amazonaws.com/dev/andy/TexturesCom_ConcretePlates0207_1_seamless_S.jpg'
  );
}

function setup() {
  createCanvas(400, 600);
  mask = createGraphics(width, height);
}

function draw() {
  // draw background image
  image(bgImage, 0, 0, width, height);
  // Draw mask shape
  mask.background(0);
  mask.ellipseMode(CENTER);
  mask.fill(255);
  mask.noStroke();
  mask.ellipse(mouseX, mouseY, 200, 200);
  // apply mask to top image & draw top image
  topImage.mask(mask.get());
  image(topImage, 0, 0, width, height);
}

```

I have created the same thing with CSS and JS in codepen but want to achieve this with p5.

https://codepen.io/Purbs/embed/preview/NWrEbzK?height=300&slug-hash=NWrEbzK&default-tabs=js,result&host=https://codepen.io

Thanks in advance for any help.

Andy

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 20, 2020, 3:32pm UTC](https://discourse.processing.org/t/using-mask-to-reveal-background-image/25528/2 "2020-11-20T15:32:39Z")

</div>

[code here](https://editor.p5js.org/noelpil/sketches/owuc4GrIo)

https://editor.p5js.org/noelpil/present/owuc4GrIo

---

<div class="post-metadata">

**Author:** ![andypurbrick](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@andypurbrick](https://discourse.processing.org/u/andypurbrick)\
**Post date:** [November 20, 2020, 4:22pm UTC](https://discourse.processing.org/t/using-mask-to-reveal-background-image/25528/3 "2020-11-20T16:22:06Z")

</div>

Thanks @noel, this is exactly what I was trying to achieve 👍🏻