# In P5.js how to draw within the constraint of an image

**URL:** <https://discourse.processing.org/t/in-p5-js-how-to-draw-within-the-constraint-of-an-image/26759>\
**Category:** Coding Questions\
**Created:** [January 4, 2021, 2:37am UTC](https://discourse.processing.org/t/in-p5-js-how-to-draw-within-the-constraint-of-an-image/26759 "2021-01-04T02:37:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [January 4, 2021, 2:37am UTC](https://discourse.processing.org/t/in-p5-js-how-to-draw-within-the-constraint-of-an-image/26759/1 "2021-01-04T02:37:56Z")

</div>

I intend to draw some dots within the constraint of the outline of an image. Currently I only know how to mask shape with another shape (using `( imgClone = img.get() ).mask( mask.get() )`), or image with another image, but couldn’t find info on how to make a shape with an image (or irregular SVG shapes beyond circle/rect/etc). Appreciate any help

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 4, 2021, 11:50am UTC](https://discourse.processing.org/t/in-p5-js-how-to-draw-within-the-constraint-of-an-image/26759/2 "2021-01-04T11:50:09Z")

</div>

> [@blkpanther](#):
>
> draw some dots within the constraint of the outline of an image

the dots can be found via random like x = random(img.x, img.x+img.width);  
and y = similar

you can connect the dots with beginShape vertex… endShape

---

<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:** [January 4, 2021, 7:12pm UTC](https://discourse.processing.org/t/in-p5-js-how-to-draw-within-the-constraint-of-an-image/26759/3 "2021-01-04T19:12:24Z")

</div>

Something like this? Code [here](https://editor.p5js.org/noelpil/sketches/qesSbnsvz).

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

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [January 5, 2021, 1:11am UTC](https://discourse.processing.org/t/in-p5-js-how-to-draw-within-the-constraint-of-an-image/26759/4 "2021-01-05T01:11:48Z")

</div>

this looks good. thanks @noel!