p5 resize window without clearing the background

Question

The following code makes use of the p5dom add-on to position the canvas in the centre of the window. To dynamically resize the canvas I'm using the windowResized() function. I want to keep the background function in setup. How do I prevent the background colour from clearing when I resize the window? Many thanks.

var cnv;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() {
  cnv = createCanvas(windowWidth,windowHeight);
  centerCanvas();
  background(255, 0, 200);
}

function draw(){

}

function windowResized() {
  centerCanvas();
  resizeCanvas(windowWidth,windowHeight)
}

score 1 · Answer 1 · answered Dec 07 '17 at 18:37

One thing you might do is draw everything to a buffer instead of directly to the screen. The createGraphics() function is your friend here. From the P5.js reference:

var pg;
function setup() {
  createCanvas(100, 100);
  pg = createGraphics(100, 100);
}
function draw() {
  background(200);
  pg.background(100);
  pg.noStroke();
  pg.ellipse(pg.width/2, pg.height/2, 50, 50);
  image(pg, 50, 50);
  image(pg, 0, 0, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>

You would want to draw everything to a buffer, and then when the screen is resized, redraw that buffer.

score 1 · Answer 2 · answered Dec 07 '17 at 21:20

Simply by adding the background function to the draw one too.

Try this:

var cnv;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() {
  cnv = createCanvas(windowWidth,windowHeight);
  centerCanvas();
  background(255, 0, 200);
}

function draw(){
  //HERE:
  background(255, 0, 200);
}

function windowResized() {
  //(you can add it here too...)
  centerCanvas();
  resizeCanvas(windowWidth,windowHeight);
}

score 0 · Answer 3 · answered Dec 09 '17 at 21:48

0

For an alternative method, you could use CSS to edit the dimensions using something similar to the following:

<style>
    canvas {
      width: 100%;
      height: 100%;
    }
</style>

answered Dec 09 '17 at 21:48

Cobain Ambrose

91
1
1
8

Thanks for your input – James Dec 10 '17 at 17:43

score 0 · Accepted Answer · answered Jun 15 '19 at 04:11

0

I would simply set the background in the windowResized function.

function windowResized() {
  centerCanvas();
  resizeCanvas(windowWidth,windowHeight)
  background(255, 0, 200);
}

answered Jun 15 '19 at 04:11

skmecs

36
5

p5 resize window without clearing the background

4 Answers4