# Masking an Image

**URL:** <https://discourse.processing.org/t/masking-an-image/7952>\
**Category:** Coding Questions\
**Created:** [January 30, 2019, 12:14am UTC](https://discourse.processing.org/t/masking-an-image/7952 "2019-01-30T00:14:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![analog](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/analog/32/3476_2.png) [@analog](https://discourse.processing.org/u/analog)\
**Post date:** [January 30, 2019, 12:14am UTC](https://discourse.processing.org/t/masking-an-image/7952/1 "2019-01-30T00:14:47Z")

</div>

I’m just trying to create a simple graphic and then mask off part of it. This works if I replace the createdGraphic with just an image, but for some reason, when using createGraphic and then saving off an image, it will not mask at all. what am I doing wrong?

```auto
var img;
var imgClone;
var mk;

function setup() {
    createCanvas(400, 400);

    img_mask = loadImage('assets/mask.png');

    img = createGraphics(400, 400);
    img.fill(255,204,0);
    img.ellipse(200, 200, 300, 300);
    imgClone = img.get();
    imgClone.mask(img_mask);

}

function draw() {
    background(100);
    imgClone.mask(img_mask);
    image(imgClone,0,0);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 30, 2019, 12:24am UTC](https://discourse.processing.org/t/masking-an-image/7952/2 "2019-01-30T00:24:40Z")

</div>

- [p5js.org/reference/#/p5/preload](http://p5js.org/reference/#/p5/preload)
- [ThimbleProjects.org/gotoloop/97931/](http://ThimbleProjects.org/gotoloop/97931/)
- [ThimbleProjects.org/gotoloop/97931/sketch.js](http://ThimbleProjects.org/gotoloop/97931/sketch.js)

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [January 30, 2019, 3:06pm UTC](https://discourse.processing.org/t/masking-an-image/7952/3 "2019-01-30T15:06:56Z")

</div>

Like GoToLoop pointed out you need to use the preload to read in your image mask files.

Adding this should fix it

```auto
function preload(){
	img_mask = loadImage('assets/mask.png')
}

```

[https://editor.p5js.org/hellonearthisman/sketches/uCqNorIbT](https://editor.p5js.org/hellonearthisman/sketches/uCqNorIbT)

/verbose

---

<div class="post-metadata">

**Author:** ![analog](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/analog/32/3476_2.png) [@analog](https://discourse.processing.org/u/analog)\
**Post date:** [January 30, 2019, 11:46pm UTC](https://discourse.processing.org/t/masking-an-image/7952/4 "2019-01-30T23:46:25Z")

</div>

That fixed it. Thanks guys.