The machine learning happens on the raw data from the video frame from the camera I believe (which on my laptop defaults to 640x480) not the CSS resizing of the video which is just cosmetic. When you grab the data from the video itself it gives you the camera data I think (640x480).  Therefore the co-ordinates coming back will be in that co-ordinate space and you will need to assume that to do any transformation after on canvas circle drawing. Thus you should be having some math that figures out the percentage x,y based on the true video width height which you can then multiply by the canvas width/height to find the new co-ordinates you need to render at.
Also it seems P5 does some rendering magic of its own - it draws the video frame to canvas and then the dots on top of that, which is not terribly efficient as you are sampling video frame twice - you can just absolute position canvas on top of video element and draw the circles only on top of the already playing video saving you pushing twice the number of video pixel data around and only needing to worry about rendering dots to canvas based on the rendered size of the canvas.
f does not need to exist.
This is how I would do it:
let detector;
let poses;
let video;
let wv=1280; //the default input size of the camera
let hv=720;
let w=640; //the size of the canvas
let h=480;

async function init() {
  const detectorConfig = {
    modelType: poseDetection.movenet.modelType.SINGLEPOSE_LIGHTNING,
  };
  detector = await poseDetection.createDetector(
    poseDetection.SupportedModels.PoseNet,
    detectorConfig
  );
}

async function videoReady() {
  console.log("Capture loaded... or has it?");
  console.log("Capture: " + video.width + ", " + video.height);
  console.log("Video element: " + video.elt.videoWidth + ", " +   
             video.elt.videoHeight);
  
  wv = video.elt.videoWidth;
  hv = video.elt.videoHeight;
  
  console.log("video ready");
  await getPoses();
}

async function setup() {
  video = createCapture(VIDEO, videoReady);
  let cnv = createCanvas(w, h);
  cnv.style('position', 'absolute');
  await init();
}

async function getPoses() {
  if(detector){
    poses = await detector.estimatePoses(video.elt);
  }
       
  //console.log(poses);
  requestAnimationFrame(getPoses);
}

function draw() {
  if (poses && poses.length > 0) {
    clear();
    text('nose x: ' + poses[0].keypoints[0].x.toFixed(2) + ' ' + (100 * poses[0].keypoints[0].x / video.width).toFixed(1) + '%', 10,10);
    text('nose y: ' + poses[0].keypoints[0].y.toFixed(2) + ' ' + (100 * poses[0].keypoints[0].y / video.height).toFixed(1) + '%', 10,20);
    text('nose s: ' + poses[0].keypoints[0].score.toFixed(2), 10,30);
    for (let kp of poses[0].keypoints) {
      let { x, y, score } = kp;
      x = x/wv;
      y = y/hv;
      
      if (score > 0.5) {
        fill(255);
        stroke(0);
        strokeWeight(4);
        circle(x*w,y*h, 16);
      }
    }
  }
}