# Resizing the canvas using canvas.size freezes my code

**URL:** <https://discourse.processing.org/t/resizing-the-canvas-using-canvas-size-freezes-my-code/32942>\
**Category:** Coding Questions\
**Created:** [October 19, 2021, 9:05pm UTC](https://discourse.processing.org/t/resizing-the-canvas-using-canvas-size-freezes-my-code/32942 "2021-10-19T21:05:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 19, 2021, 9:05pm UTC](https://discourse.processing.org/t/resizing-the-canvas-using-canvas-size-freezes-my-code/32942/1 "2021-10-19T21:05:48Z")

</div>

I want to resize a canvas using [`canvas.size(w, h)`](https://p5js.org/reference/#/p5.Element/size) but it keeps freezing my code!!!

## What I’ve tried

- Converting the canvas (I think is `p5.Renderer`) into an element by doing this: `new p5.Element(canvas.elt, p5)`, but it still freezes it
- Using `resizeCanvas()`, did not resize the canvas, but at least it did not freeze my code
- Setting the `isMainCanvas` propriety in the `p5.Renderer` constructor to `true`

## My Code:

The one i am using is `resizeCanvasByPercent()`.

```auto
/**
 * @param {HTMLCanvasElement || p5.Renderer || p5.Element} canvas - The canvas you want to resize
 * @param {Number} size - The new width or both width and height of the canvas you want to change
 * @param {Number} [h=] - The new height of the canvas
 * @param {Boolean} [useAsNewRenderer=] - If you want to use the new canvas as the default one
 * 
 * @returns { {width: Number, height: Number} }
 */
function resizeCanvasPx(canvas, size, h = size, useAsNewRenderer = false) {

  if (canvas instanceof HTMLCanvasElement) { canvas = new p5.Element(canvas, p5)}

  if (canvas instanceof p5.Renderer) { canvas = new p5.Element(canvas.elt, p5) }
  console.log(canvas.size)

  canvas.size(size, h)

  console.log(canvas)

  return new p5.Element(canvas.elt, p5).size()
}

/**
 * @param {HTMLCanvasElement || p5.Element || p5.Renderer} canvas - the canvas you want to resize
 * @param {Number} percent - The new width or both width and height percents you want to change
 * @param {Number} [heightPercent=] - The new height percent
 * 
 * @returns { {width: Number, height: Number} }
 */
function resizeCanvasByPercent(canvas, percent, heightPercent = percent) {

  if (canvas instanceof HTMLCanvasElement) { canvas = new p5.Element(canvas) }

  if (canvas instanceof p5.Renderer) { canvas = new p5.Element(canvas.elt, p5) }

  const canvasParentSize = new p5.Element(canvas.parent(), p5).size();

  const w = canvasParentSize.width * (percent / 100)
  const h = canvasParentSize.height * (heightPercent / 100)

  console.log(resizeCanvasPx(canvas, w, h))

  //console.log(resizeCanvasPx(canvas, 100, 100))

  return resizeCanvasPx(canvas, w, h);
}

```

**All my code:** [https://replit.com/@ErrorbotTHE2nd/Roblox-External-Editor#script.js](https://replit.com/@ErrorbotTHE2nd/Roblox-External-Editor#script.js)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 19, 2021, 10:17pm UTC](https://discourse.processing.org/t/resizing-the-canvas-using-canvas-size-freezes-my-code/32942/2 "2021-10-19T22:17:20Z")

</div>

Hi @Errorbot1122,

First of all, can you explain why you need to resize the canvas more than once? And if it freezes your code it means that you want to resize it frequently?

> [@Errorbot1122](#):
>
> Using `resizeCanvas()` , did not resize the canvas, but at least it did not freeze my code

mmh strange, because the documentation of [`resizeCanvas`](https://p5js.org/reference/#/p5/resizeCanvas) says this:

> Resizes the canvas to given width and height. The canvas will be cleared and draw will be called immediately, allowing the sketch to re-render itself in the resized canvas.

---

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 20, 2021, 3:41pm UTC](https://discourse.processing.org/t/resizing-the-canvas-using-canvas-size-freezes-my-code/32942/3 "2021-10-20T15:41:37Z")

</div>

I don’t need to resize it more than once, I just need to resize it so I can fit in my `<div>`

```auto
<div id="editor">

  <div class="center" id="view"> <!-- The div -->

    <div id="textEditor"></div>

  </div>
      
</div>

<script src="script.js"></script>

```

Again you can go to my repl: [here](https://replit.com/@ErrorbotTHE2nd/Roblox-External-Editor)

---

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 20, 2021, 6:23pm UTC](https://discourse.processing.org/t/resizing-the-canvas-using-canvas-size-freezes-my-code/32942/4 "2021-10-20T18:23:52Z")

</div>

NVM

I found out that I was doing it the wrong way