# Scale canvas in web editor

**URL:** <https://discourse.processing.org/t/scale-canvas-in-web-editor/18411>\
**Category:** p5.js\
**Created:** [March 5, 2020, 11:20am UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411 "2020-03-05T11:20:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![1igor](https://avatars.discourse-cdn.com/v4/letter/1/8dc957/32.png) [@1igor](https://discourse.processing.org/u/1igor)\
**Post date:** [March 5, 2020, 11:20am UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411/1 "2020-03-05T11:20:09Z")

</div>

Hi! I have a big canvas which doesn’t fit in my screen with editor. Can I somehow change its scale so I could see it whole without zooming out the whole page?

---

<div class="post-metadata">

**Author:** ![banjavascript](https://avatars.discourse-cdn.com/v4/letter/b/f07891/32.png) [@banjavascript](https://discourse.processing.org/u/banjavascript)\
**Post date:** [March 6, 2020, 12:19pm UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411/2 "2020-03-06T12:19:12Z")

</div>

are you GUYS (and gals) CRAZY???  
can you not help a person with a problem???

btw struggling with the same issue need some help

---

<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:** [March 6, 2020, 6:12pm UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411/3 "2020-03-06T18:12:11Z")

</div>

> [@1igor](#):
>
> Can I somehow change its scale

Yes. The first command in draw can be `scale()`

> **[reference | p5.js](https://p5js.org/reference/#/p5/scale)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> [@banjavascript](#):
>
> can you not help a person with a problem???

Please do not be rude! The people on this forum are volunteers – many have jobs and busy lives. They respond when they can.

---

<div class="post-metadata">

**Author:** ![banjavascript](https://avatars.discourse-cdn.com/v4/letter/b/f07891/32.png) [@banjavascript](https://discourse.processing.org/u/banjavascript)\
**Post date:** [March 8, 2020, 8:59am UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411/4 "2020-03-08T08:59:49Z")

</div>

sorry im sorry ❤❤❤❤❤❤❤❤❤❤❤❤

---

<div class="post-metadata">

**Author:** ![1igor](https://avatars.discourse-cdn.com/v4/letter/1/8dc957/32.png) [@1igor](https://discourse.processing.org/u/1igor)\
**Post date:** [March 8, 2020, 9:07am UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411/5 "2020-03-08T09:07:13Z")

</div>

> [@jeremydouglass](#):
>
> Yes. The first command in draw can be `scale()`

Hi Jeremy! Looks like it doesn’t work the way I want it to work.

My issue is I have a 1600x1600 canvas and I want it to appear on screen as for example 600x600 so I could see it whole without scrolling. Currently as I can tell it is not possible unless you use createGraphics with the size you want and then place it to the smaller canvas as an image. But it is not super convenient.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 8, 2020, 12:46pm UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411/6 "2020-03-08T12:46:39Z")

</div>

Hello,

> [@1igor](#):
>
> I have a big canvas which doesn’t fit in my screen with editor.

This discussion is related:

> [@How to get preview in a separate window](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/10):
>
> Thank you. I am sorry for posting in the wrong place!

I use the Processing editor for P5.js and can comfortably edit the sketch (font and size of my choosing) and launch it in a separate monitor in a browser (can zoom as required).

``:)`

---

<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:** [March 8, 2020, 4:52pm UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411/7 "2020-03-08T16:52:28Z")

</div>

> [@1igor](#):
>
> I have a 1600x1600 canvas and I want it to appear on screen as for example 600x600

If you express your sketch elements in units relative to `width` and `height` then you can just modify `createCanvas()` and your sketch will scale anytime you modify `createCanvas`.

```auto
function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(220);
  ellipse(width/2, height/2, width*.75, height*.75);
}

```

---

<div class="post-metadata">

**Author:** ![1igor](https://avatars.discourse-cdn.com/v4/letter/1/8dc957/32.png) [@1igor](https://discourse.processing.org/u/1igor)\
**Post date:** [March 8, 2020, 9:21pm UTC](https://discourse.processing.org/t/scale-canvas-in-web-editor/18411/8 "2020-03-08T21:21:11Z")

</div>

Wow thank you I didn’t know I could use processing editor for p5.js it is super cool!