# Mask image with Text

**URL:** <https://discourse.processing.org/t/mask-image-with-text/27122>\
**Category:** Coding Questions\
**Created:** [January 16, 2021, 6:59pm UTC](https://discourse.processing.org/t/mask-image-with-text/27122 "2021-01-16T18:59:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![anarts\_3](https://avatars.discourse-cdn.com/v4/letter/a/e8c25b/32.png) [@anarts\_3](https://discourse.processing.org/u/anarts_3)\
**Post date:** [January 16, 2021, 6:59pm UTC](https://discourse.processing.org/t/mask-image-with-text/27122/1 "2021-01-16T18:59:23Z")

</div>

Hello everyone!

So, quick question, I want to mask a image with a string of text from the code, but I can’t seem to figure out how to mask with text… I’m trying to achieve something like this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8bf8e57e10d59213063abc5fd9768ad40c54ba00.jpeg)

When I search about this I only find the mask() function with images…  
Can anyone help me?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [January 17, 2021, 2:03am UTC](https://discourse.processing.org/t/mask-image-with-text/27122/2 "2021-01-17T02:03:57Z")

</div>

You can draw the text to an an off-screen graphics buffer, then use that buffer as a guide to govern which pixels in the original photograph to leave as they are, and which ones to make black.

```auto
let img;
let pg;
function preload() {
  img = loadImage("box_turtle.jpg");
}

function setup() {
  createCanvas(img.width, img.height);
  noLoop();
}

function draw() {
  img.loadPixels();
  // create a p5.Graphics: offscreen graphics buffer
  pg = createGraphics(width, height);
  pg.textAlign(CENTER, CENTER);
  pg.textSize(120);
  pg.textStyle(BOLD);
  pg.background(0);
  // draw text to buffer in white
  pg.fill(255);
  pg.text("Eastern\nBox\nTurtle", width / 2, height / 2);
  pg.loadPixels();
  // use the buffer as a guide for altering the image
  for (var i = 0; i < img.pixels.length; i += 4) {
    // if buffer pixel is not white (red is not 255) blacken the image pixel 
    if (pg.pixels[i] != 255) {
      img.pixels[i] = 0;
      img.pixels[i+1] = 0;
      img.pixels[i+2] = 0;
    }
  }
  img.updatePixels();
  image(img, 0, 0);
}

```

![eastern_box_turtle](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a7266ee989d70f1855d93cdc7b09f4f6f1f0841e.jpeg)

Source of image: [Female Eastern Box Turtle #4](https://www.flickr.com/photos/9428166@N03/2585374876/) by Sandy Richard

_Edited on January 17, 2020 to make a slight revision to the code and to provide a link to the image._

---

<div class="post-metadata">

**Author:** ![anarts\_3](https://avatars.discourse-cdn.com/v4/letter/a/e8c25b/32.png) [@anarts\_3](https://discourse.processing.org/u/anarts_3)\
**Post date:** [January 17, 2021, 2:11pm UTC](https://discourse.processing.org/t/mask-image-with-text/27122/3 "2021-01-17T14:11:05Z")

</div>

Thank you!! This is exactly what I was looking for! I completely forgot about using createGraphics(), thank you again 😊

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [January 17, 2021, 2:52pm UTC](https://discourse.processing.org/t/mask-image-with-text/27122/4 "2021-01-17T14:52:48Z")

</div>

You are quite welcome, @anarts_3, - and welcome to the Processing Forums!

Note that using variables to set the size of the canvas, as follows, is not recommended, but it did work, and does offer a convenience.

```auto
  createCanvas(img.width, img.height);

```

To avoid potential trouble, you could hard code the `width` and the `height` with constants instead.