'Scaling' the canvas?

p5.js Beginners
5

Maybe this example can help:

Image:

pixellated
pixellated640×640 1.63 KB

p5.js code:

let pg;
let pixelSize = 32;
function setup() {
  createCanvas(320, 320);
  pg = createGraphics(width / pixelSize, height / pixelSize);
  pg.ellipseMode(CENTER);
  pg.rectMode(CENTER);
  imageMode(CENTER);
  pg.noStroke();
  noSmooth();
  pg.noSmooth();
  noLoop();
}

function draw() {
  pg.background(255);
  push();
  pg.translate(pg.width / 2, pg.height / 2);
  pg.rotate(QUARTER_PI);
  pg.fill(0);
  pg.rect(0, 0, pg.width / 1.2, pg.height / 1.8);
  pg.fill(255);
  pg.ellipse(0, 0, pg.width / 1.4, pg.height / 2.0);
  pg.fill(0);
  pg.ellipse(0, 0, pg.width / 2.4, pg.height / 3.6);
  image(pg, width / 2, height / 2, pixelSize * pg.width, pixelSize * pg.height);
  pop();
}

EDITED on November 27, 2022 to revise the code slightly and to replace the image.