Resizing the canvas using canvas.size freezes my code

p5.js Coding Questions
1

I want to resize a canvas using canvas.size(w, h) 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().

/**
 * @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

2

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?

mmh strange, because the documentation of 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.

3

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

<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

4

NVM

I found out that I was doing it the wrong way

1 Like