# How do I draw shapes over an image?

**URL:** <https://discourse.processing.org/t/how-do-i-draw-shapes-over-an-image/6228>\
**Category:** Coding Questions\
**Created:** [December 2, 2018, 10:00pm UTC](https://discourse.processing.org/t/how-do-i-draw-shapes-over-an-image/6228 "2018-12-02T22:00:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JennyMcCreadie](https://avatars.discourse-cdn.com/v4/letter/j/cdc98d/32.png) [@JennyMcCreadie](https://discourse.processing.org/u/JennyMcCreadie)\
**Post date:** [December 2, 2018, 10:00pm UTC](https://discourse.processing.org/t/how-do-i-draw-shapes-over-an-image/6228/1 "2018-12-02T22:00:53Z")

</div>

Hello  
It’s super simple but I’m trying to write a code where I have a background image and when you click on it or run the mouse over it, squares appear and stay on the page. I know it’s most likely to do with the order of the code, but I can’t figure it out.

Here is my code so far, no shapes are appearing:

```auto
PImage img1;

void setup(){
  size(800,600);
  noLoop();
  background(225);
  smooth();
  img1 = loadImage("Screenshot Sketch 7.png");
   
}

void draw(){
  image(img1,0,0,800,600);
  mousePressed();
  rect(100, 100, mouseX, mouseY);
}

```

Thanks for any help! 🙂

---

<div class="post-metadata">

**Author:** ![JennyMcCreadie](https://avatars.discourse-cdn.com/v4/letter/j/cdc98d/32.png) [@JennyMcCreadie](https://discourse.processing.org/u/JennyMcCreadie)\
**Post date:** [December 2, 2018, 10:04pm UTC](https://discourse.processing.org/t/how-do-i-draw-shapes-over-an-image/6228/2 "2018-12-02T22:04:47Z")

</div>

Hey nevermind, I figured it out!

```auto
PImage img1;

void setup(){
size(800,600);
img1 = loadImage("Screenshot Sketch 7.png");
image(img1,0,0,800,600);
}

void draw(){
  mousePressed();
  rect(mouseX,mouseY,mouseX,mouseY);
}

```

---

<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:** [December 4, 2018, 12:31am UTC](https://discourse.processing.org/t/how-do-i-draw-shapes-over-an-image/6228/3 "2018-12-04T00:31:56Z")

</div>

Glad you worked it out – draw the image once, then each frame in draw put a rectangle at the current mouse position.

That line `mousePressed()` is not necessary.

I’m guessing that for your rect, you want the 3rd and 4th term to be the size of the rectangle – e.g. 10, 10 or 40, 40.