# \[SOLVED\] Making the contents of a frame relative to its size

**URL:** <https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595>\
**Category:** Coding Questions\
**Created:** [September 17, 2018, 9:44am UTC](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595 "2018-09-17T09:44:58Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [September 17, 2018, 10:29am UTC](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/2 "2018-09-17T10:29:10Z")

</div>

To make your canvas resizable, you can simply put `surface.setResizable(true);` in your `setup`.

If you want to make it compatible to any size, the best way to do it would be to find everything that has an `x`, `y`, width or height value, and make it relative to `width` and `height`. Here’s an example of that:

```auto
void setup() {
  size(200, 200);
  surface.setResizable(true);
}

void draw() {
  background(100, 100);

  float x = width/2;
  float y = height/2;
  float w = width/20; // Width
  float h = height/20; // Height
  rect(x-w/2, y-h/2, w, h);
}

```

Another (more efficent) way of doing it is to use the [map function](https://processing.org/reference/map_.html). The map functions takes a number, and puts it into a ratio that you want it to be in (See reference for more info). So if your canvas size is 200 x 200, you could use map like:

```auto
float widthchange = map(1,0,<defaultwidth>(200),0,width);
float heightchange = map(1,0,<defaultheight>(200),0,height);

```

Then multiply all `x`/width values with `widthchange`, and `y`/height values with `heightchange`.

---

_[View the full topic](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595)._