# 'Scaling' the canvas?

**URL:** <https://discourse.processing.org/t/scaling-the-canvas/39909>\
**Category:** Beginners\
**Created:** [November 27, 2022, 8:35pm UTC](https://discourse.processing.org/t/scaling-the-canvas/39909 "2022-11-27T20:35:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![PaulR](https://avatars.discourse-cdn.com/v4/letter/p/c4cdca/32.png) [@PaulR](https://discourse.processing.org/u/PaulR)\
**Post date:** [November 27, 2022, 8:35pm UTC](https://discourse.processing.org/t/scaling-the-canvas/39909/1 "2022-11-27T20:35:41Z")

</div>

Hello

Is it possible to scale/change the resolution of the canvas in p5.js to create pixel type games? For example, to create a canvas which is 640x640 but will only display 160x160 ‘pixels’ (each being 4x4 actual pixels)?

TIA

Paul

---

<div class="post-metadata">

**Author:** ![PaulR](https://avatars.discourse-cdn.com/v4/letter/p/c4cdca/32.png) [@PaulR](https://discourse.processing.org/u/PaulR)\
**Post date:** [November 27, 2022, 8:43pm UTC](https://discourse.processing.org/t/scaling-the-canvas/39909/2 "2022-11-27T20:43:33Z")

</div>

Oh, I think I could do this by drawing to an image then scaling that image up to a larger display canvas. Is that right?

---

<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:** [November 27, 2022, 8:46pm UTC](https://discourse.processing.org/t/scaling-the-canvas/39909/3 "2022-11-27T20:46:56Z")

</div>

Draw on big image, scale down and display

Or try `*0.2` to draw directly

---

<div class="post-metadata">

**Author:** ![PaulR](https://avatars.discourse-cdn.com/v4/letter/p/c4cdca/32.png) [@PaulR](https://discourse.processing.org/u/PaulR)\
**Post date:** [November 27, 2022, 9:07pm UTC](https://discourse.processing.org/t/scaling-the-canvas/39909/4 "2022-11-27T21:07:26Z")

</div>

OK thanks, I understand.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [November 27, 2022, 9:53pm UTC](https://discourse.processing.org/t/scaling-the-canvas/39909/5 "2022-11-27T21:53:48Z")

</div>

Maybe this example can help:

Image:

 ![pixellated](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/3/338f0a3c1dc9a275e1a6245868fd2b6c4af97380.png)

p5.js code:

```auto
let pg;
let pixelSize = 32;
function setup() {
  createCanvas(320, 320);
  pg = createGraphics(width / pixelSize, height / pixelSize);
  pg.ellipseMode(CENTER);
  pg.rectMode(CENTER);
  imageMode(CENTER);
  pg.noStroke();
  noSmooth();
  pg.noSmooth();
  noLoop();
}

function draw() {
  pg.background(255);
  push();
  pg.translate(pg.width / 2, pg.height / 2);
  pg.rotate(QUARTER_PI);
  pg.fill(0);
  pg.rect(0, 0, pg.width / 1.2, pg.height / 1.8);
  pg.fill(255);
  pg.ellipse(0, 0, pg.width / 1.4, pg.height / 2.0);
  pg.fill(0);
  pg.ellipse(0, 0, pg.width / 2.4, pg.height / 3.6);
  image(pg, width / 2, height / 2, pixelSize * pg.width, pixelSize * pg.height);
  pop();
}

```

_EDITED on November 27, 2022 to revise the code slightly and to replace the image._

---

<div class="post-metadata">

**Author:** ![PaulR](https://avatars.discourse-cdn.com/v4/letter/p/c4cdca/32.png) [@PaulR](https://discourse.processing.org/u/PaulR)\
**Post date:** [November 28, 2022, 11:26am UTC](https://discourse.processing.org/t/scaling-the-canvas/39909/6 "2022-11-28T11:26:18Z")

</div>

Thanks for the example although I was hoping to avoid having to manually scale each primitive/image.

---

<div class="post-metadata">

**Author:** ![REK166](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@REK166](https://discourse.processing.org/u/REK166)\
**Post date:** [November 28, 2022, 6:37pm UTC](https://discourse.processing.org/t/scaling-the-canvas/39909/7 "2022-11-28T18:37:26Z")

</div>

You can make your own functions for all the drawing stuff, you just need to multiply all the input by a certain factor, like this:

```auto
function myRect(x1,y1,x2,y2) {
  rect(x1*2,y1*2,x2*2,12*2);
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 29, 2022, 11:06am UTC](https://discourse.processing.org/t/scaling-the-canvas/39909/8 "2022-11-29T11:06:35Z")

</div>

I am surprised that no one has suggested using the scale() function. In this sketch we define a display 640x640 but use the scale function to change the horizontal and vertical pixel range values to 0- 319 instead of 0 - 639

```auto
function setup() {
  createCanvas(640, 640);
  myScale = 2;
  wScaled = width/myScale;
  hScaled = height/myScale;
}

function draw() {
  scale(2, 2); // Makes x and y screen range 0-319
  background(64);
  stroke(255, 0, 0);
  strokeWeight(2);
  fill(255, 200, 200);
  rect(0, 0, wScaled/2, wScaled/2); // Top left quarter
  rect(wScaled/2, hScaled/2, wScaled/2, wScaled/2); // bottom right quarter
  stroke(0,255,0);
  fill(200,255,200);
  ellipse(wScaled/2, hScaled/2, wScaled/6,hScaled/6); // center of display
}

```