# Applying a background image to a rect()

**URL:** <https://discourse.processing.org/t/applying-a-background-image-to-a-rect/13711>\
**Category:** Coding Questions\
**Created:** [August 30, 2019, 9:08pm UTC](https://discourse.processing.org/t/applying-a-background-image-to-a-rect/13711 "2019-08-30T21:08:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bubblebyb](https://avatars.discourse-cdn.com/v4/letter/b/e9c0ed/32.png) [@Bubblebyb](https://discourse.processing.org/u/Bubblebyb)\
**Post date:** [August 30, 2019, 9:08pm UTC](https://discourse.processing.org/t/applying-a-background-image-to-a-rect/13711/1 "2019-08-30T21:08:52Z")

</div>

Is it possible to have a background image for a rect() in p5? I’ve seem some answers that suggest a workaround by using a mask but all I’m looking for is having an image as a background for a shape such as a rect().

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 31, 2019, 12:11am UTC](https://discourse.processing.org/t/applying-a-background-image-to-a-rect/13711/2 "2019-08-31T00:11:47Z")

</div>

but i understand that a pic drawn with `image(img,x,y);` actually is a rectangle,  
but to have border stroke… you can draw it over a rectangle…  
so it is not clear what additional functionality you need?

with not rect shapes as you say, more complicated.  
so this might not help [https://editor.p5js.org/kll/sketches/ixqldJGjd](https://editor.p5js.org/kll/sketches/ixqldJGjd)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 31, 2019, 11:43pm UTC](https://discourse.processing.org/t/applying-a-background-image-to-a-rect/13711/3 "2019-08-31T23:43:27Z")

</div>

> [@Bubblebyb](#):
>
> a background image for a rect() in p5?

There are two ways:

```auto
let img;
function preload() {
  img = loadImage('loadImage_0.png');
}
function setup() {
  createCanvas(400,400, WEBGL);
  background(128);

  // method 1: draw an image + nofill rect
  // they must be the same size
  image(img, 0, 0);
  noFill();
  rect(0,0,100,100);

  // method 2: use WEBGL, texture + rect
  // the rect may be any size, image will warp
  translate(-100,-100)
  texture(img);
  rect(0,0,40,150);
}

```

Runnable example:

> **[p5.js Web Editor](https://editor.p5js.org/jeremydouglass/sketches/T2ooOe6Nx)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

Because you said “a shape such as a rect” I suspect what you want is texture, which works on many shapes in the WEBGL renderer.