// 

// Create a "normalised" version of the canvas size. 

// I like to use a large round number like 1000 rather than 1 because it is nicer inside my brain.

// 

// Set all sizes based off those normalised dimensions and then scale the canvas when drawing stuff. 

// 

// You have to translate before and after the scale, by different amounts, which are calculated in setup.

// You also have to think a bit about when you can use whole numbers (e.g. 500) and when you need to use a function of your normalised dimensions, (e.g. canvasSize.normH * 0.5 to place something vertically in the center)

​

let canvasSize, factor, trans;

​

function setup() {

  canvasSize = {

    w: int(random(200, 700)),

    normW: 1000,

    ratio: 1.5,

  }

​

  canvasSize.h = int(canvasSize.w * canvasSize.ratio);

  canvasSize.normH = canvasSize.normW * canvasSize.ratio;

  factor = {

    x: canvasSize.w / canvasSize.normW,

    y: canvasSize.h / canvasSize.normH

  };

  trans = {

    x: canvasSize.w*0.5,

    y: canvasSize.h*0.5,

    rx: -(canvasSize.w/factor.x) * 0.5,

    ry: -(canvasSize.h/factor.y) * 0.5,

  }

  createCanvas(canvasSize.w, canvasSize.h);

}

​

function draw() {

  background(220);

  let diameter = 500;

  let sw = 5;

  translate(trans.x, trans.y);

  scale(factor.x, factor.y);

  translate(trans.rx, trans.ry);

​

  strokeWeight(sw);

  ellipse(canvasSize.normW*0.5, canvasSize.normH*0.5, diameter);

  noFill();

  rect(0, 0, canvasSize.normW, canvasSize.normH); // border

  rect(100,100,50,23); 

  noLoop();

}