Resize Canvas in p5

mureytasroc

I have tried using the resizeCanvas() resize() and size() methods to resize my canvas in p5. I made a canvas variable and created the canvas by writing canvas = createCanvas(width,height) but I need to resize the canvas after it is created. How would I do this?

KevinWorkman

Do you need the canvas variable? What are you using it for?

What happens when you just call resizeCanvas() as discussed in the reference?

Can you please post a MCVE showing what you've tried so far?

mureytasroc

When I call resizeCanvas it resets the canvas and resizes it as expected but then how do I change the position of the canvas (which I would do with canvas.position()) or set the canvas to have a parent div (which I would do with canvas.parent())?

mureytasroc

Also I plan to use a buffer so how would I be able to resize the buffer?

KevinWorkman

In the future, please try to be more specific about what you've tried by posting a MCVE along with your question.

but then how do I change the position of the canvas (which I would do with canvas.position()) or set the canvas to have a parent div (which I would do with canvas.parent())?

What happened when you tried exactly that?

This works fine for me:

var canvas;

function setup() {
  canvas = createCanvas(windowWidth/2, windowHeight/2);
    canvas.position(windowWidth/4, windowHeight/4);
}

function draw() {
  background(220);
}

function windowResized() {
  resizeCanvas(windowWidth/2, windowHeight/2);
  canvas.position(windowWidth/4, windowHeight/4);
}

Also I plan to use a buffer so how would I be able to resize the buffer?

Again, the best thing you can do is try something and post a MCVE if you get stuck. Good luck!

mureytasroc

Thank you for the post -- I found that the size() method (so canvas.size() for instance) will work to resize canvas variables as well as buffer variables. Not sure why this isn't anywhere in the p5 reference. Your way would also work if I were just using a canvas but as I said I need to use a buffer for this project. A note for anyone reading this: you have to set up your canvas all over again after you have changed its size with this method because the size method seems to reset the canvas as if you had just called createCanvas().

In the future I will include an MCVE as you said.