resizenative.js

var resize = {
  time: 0,
  delay: 300,
  handled: true
}

var circleDiameter;

function setup() {
  let s = min(window.innerWidth, window.innerHeight);
  createCanvas(s, s);
  pixelDensity(1);
  sizeSettings();
}

function sizeSettings(){
  // handle different screensizes, runs when the screen resizes
  // for example...
  circleDiameter = width*0.8;

}

function draw() {
  background(50,50,50);
  ellipse(width/2, height/2, circleDiameter);

  if (!resize.handled){
    // Check the last time the window resized so we dont constantly deal with it
    // as someone is dragging the window size.
    // Instead, it waits for a pause in resizing.
    if (resize.time + resize.delay < millis()){
      handleResize();
      resize.handled = true;
    }
  }
}

// handle resizing and rejig appropriate variables
function handleResize(){
  let s = min(window.innerWidth, window.innerHeight);

  resizeCanvas(s, s);
  sizeSettings();
}


// Event called whenever the browser window is resized
function myResize() {
  resize.time = millis();
  resize.handled = false;
}

window.addEventListener('resize', myResize);