# Item should not go out of the canvas

**URL:** <https://discourse.processing.org/t/item-should-not-go-out-of-the-canvas/695>\
**Category:** Coding Questions\
**Created:** [June 3, 2018, 11:21pm UTC](https://discourse.processing.org/t/item-should-not-go-out-of-the-canvas/695 "2018-06-03T23:21:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![deesha\_nayar](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@deesha\_nayar](https://discourse.processing.org/u/deesha_nayar)\
**Post date:** [June 3, 2018, 11:21pm UTC](https://discourse.processing.org/t/item-should-not-go-out-of-the-canvas/695/1 "2018-06-03T23:21:10Z")

</div>

I made a dart board but it has some problems.

Firstly it is not moving with the mouse and is following the mouse but I dont want that.

Secondly I do not want my dart board to go out of the canvas

Thirdly the size should be half of original size when mouse is at the top of canvas, original size when mouse is in the middle and double the original size when mouse is at the bottom of the screen.(Cannot use IF, ELSE)

Here is the code:

```auto
int sizectr=50;
int xctr = 250;
int yctr = 250;

void setup() {
  size(500, 500);
}

void draw() {
  background(255, 200, 200);
  controlItem();
  drawItem();
}

void drawItem () {
  fill(127, 0, 0);
  ellipse(xctr, yctr, 2*sizectr, 2*sizectr);
  fill(255);
  ellipse(xctr, yctr, 1.5*sizectr, 1.5*sizectr);
  fill(127, 0, 0);
  ellipse(xctr, yctr, sizectr, sizectr);
  fill(255);
  ellipse(xctr, yctr, .5*sizectr, .5*sizectr);
  fill(127, 0, 0);
  ellipse(xctr, yctr, sizectr/4, sizectr/4);
  fill(255);
  ellipse(xctr, yctr, sizectr*.09, sizectr*.09);

  //ellipse(xctr,yctr,sizectr*.09,sizectr*.09);

  stroke(0, 255, 0);
  line(xctr, yctr, xctr+(sizectr/4), yctr+sizectr/4);
  fill(0, 255, 0);
  triangle(xctr, yctr, xctr+sizectr/6, yctr, xctr, yctr+sizectr/6);
  stroke(0);
} 

void controlItem () { 
  sizectr=10+(100*mouseY/500);
  xctr=sizectr+(mouseX-2*sizectr);
  yctr=sizectr+(mouseY-2*sizectr);
  float n = 20;
  float xC = (xctr)/n;
  float yC = (yctr)/n;
}

```

Please help me with the problem.

---

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [June 5, 2018, 11:22am UTC](https://discourse.processing.org/t/item-should-not-go-out-of-the-canvas/695/2 "2018-06-05T11:22:21Z")

</div>

Hi @deesha_nayar 😌

> [@deesha\_nayar](#):
>
> Firstly it is not moving with the mouse and is following the mouse but I dont want that.

I’m not sure to get what you mean. What’s the difference between moving with the mouse and following the mouse ?

> [@deesha\_nayar](#):
>
> Secondly I do not want my dart board to go out of the canvas

Did you try using constrain() ?

```auto
posX=constrain(posX, 0, width);
posY=constrain(posY, 0, height);

```

> [@deesha\_nayar](#):
>
> (Cannot use IF, ELSE)

Why not ? It seems to be the easiest way :

```auto
if (mouseY<width*0.66) scale=x;
else scale=x*2;

```