# Stretch the canvas without changing the resolution

**URL:** <https://discourse.processing.org/t/stretch-the-canvas-without-changing-the-resolution/33836>\
**Category:** p5.js\
**Created:** [November 30, 2021, 5:03pm UTC](https://discourse.processing.org/t/stretch-the-canvas-without-changing-the-resolution/33836 "2021-11-30T17:03:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sayochi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sayochi/32/15126_2.png) [@Sayochi](https://discourse.processing.org/u/Sayochi)\
**Post date:** [November 30, 2021, 5:03pm UTC](https://discourse.processing.org/t/stretch-the-canvas-without-changing-the-resolution/33836/1 "2021-11-30T17:03:04Z")

</div>

can I stretch the canvas without changing the resolution (width,height veriables)?

I’m using my p5js sketch canvas inside a html div. which I’m allowed to thinker with.

what I thought was initial canvas size can not be changed. so `resizeCanvas()` would probably stretch it or smth. but turns out its literally changing the resolution of the canvas. which I don’t want right now. I don’t know what I can do right now.

I’m trying to preview some image processing inside my canvas and I want to resize my canvas to the predetermined preview resolutions. but if its smaller than the div that the canvas is children to, I want my canvas to stretch out to fill the gaps without messing up the aspect ratio. I guess I know how to find the required stretched out sizes. but I don’t have a way to stretch it out 🤔

any way to help?

---

<div class="post-metadata">

**Author:** ![Sayochi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sayochi/32/15126_2.png) [@Sayochi](https://discourse.processing.org/u/Sayochi)\
**Post date:** [November 30, 2021, 11:45pm UTC](https://discourse.processing.org/t/stretch-the-canvas-without-changing-the-resolution/33836/2 "2021-11-30T23:45:10Z")

</div>

for future questions, so like I said, `resizeCanvas()` changes the resolution of the canvas. which would mean for me to do extra pixel processing. I didn’t want to simulate the pixelations myself because thats still extra pixel color applying for my cpu. so what I did is that I did all my work in a [graphic](https://p5js.org/reference/#/p5/createGraphics) object. which is at the size of what I want it to be. then stamped it on my (for the context, big) canvas with the [image()](https://p5js.org/reference/#/p5/image) function which can stretch things. now I can work with low resolution canvases… on big canvasses. it worked fine