I found what the problem was.

It was not due to me setting the canvas.elt.width and canvas.elt.height, even though setting them is indeed redundant.

It's because in the code shown in the OP I was capturing the very first frame and this is too soon so the very first frame is still dark and blurry. Apparently the first few frames coming from the camera are like that.

If I give my code a delay of e.g. 5 seconds the frame it captures is then the exact same quality as the one coming from the video feed.

let video
let canvasWidth = 400

// set this to 10 on https://editor.p5js.org/ and you'll see the problem
const DELAY = 5000

function setup() {
  let canvas = createCanvas(canvasWidth, canvasWidth)
  canvas.elt.width = canvasWidth // redundant
  canvas.elt.height = canvasWidth // redundant
  video = createCapture(VIDEO)
}

let PAUSE = false
let start = Date.now()

async function draw() {
  let delay = Date.now() - start

  if (video && video.loadedmetadata) {

    if (delay > DELAY && !PAUSE) {
      PAUSE = true
      
      let x = Math.round((video.width / 2) - (canvasWidth / 2))
      let y = Math.round((video.height / 2) - (canvasWidth / 2))

      // the quality of this image is now perfect
      image(video.get(), 0, 0, canvasWidth, canvasWidth, x, y, canvasWidth, canvasWidth)
    }

  }

}

You should not be setting width/height this way. That will mess up the sizing on high DPI displays and cause your image to appear stretched and blurry.

const canvasSize = 500;

function setup() {
  let canvas = createCanvas(canvasSize, canvasSize)
  // Don't do this, it will mess up the sizing on high DPI displays:
  // canvas.elt.width = canvasSize
  // canvas.elt.height = canvasSize
  video = createCapture(VIDEO)
}

let PAUSE = false;

function draw() {
  if (video && video.loadedmetadata) {
    if (!PAUSE) {
      // the quality of this image is much lower than what is shown inside p5's <video>
      image(video.get(), 0, 0, canvasSize, canvasSize, 0, 0, canvasSize, canvasSize)
    }
  }
}

function keyPressed() {
  if (key === 'p') {
    PAUSE = !PAUSE;
  }
}

With this code I paused the video that was being rendered to p5.js and then took a screenshot. The version of the video displayed on the p5.js canvas wash indistinguishable from the live video.