p5.j​​s | 如何更改画布的大小？

Question

The code below wants to achieve the following:

1. Create a 200x200 <video> with a live video capture
2. Ceate a 200x200 <canvas> of that video capture
3. Takes the first frame of the capture and append it as an 200x200 <img> on the page.

    let video
    let canvasSize = 200
    let PAUSE_DRAW = false
    
    function setup() {
      createCanvas(canvasSize, canvasSize)
      video = createCapture(VIDEO)
      video.size(canvasSize, canvasSize)
    }
        
    async function draw() {
    
      if (video && video.loadedmetadata) {
    
        if (!PAUSE_DRAW) {
          // get a 200x200 from the center of the video and draw it on the canvas
          image(video.get(), 0, 0, canvasSize, canvasSize, x, y, canvasSize, canvasSize)
    
          let currentFrameAsBase64 = canvas.toDataURL()
          
          // append <img> with current frame as src
          document.getElementById('frame').src = currentFrameAsBase64
    
          PAUSE_DRAW = true
    
        }
      }
    }

Here is the problem I'm having:

The <canvas> actual size is still 400x400. It's only the image that I draw inside it that's 200x200. As a result, when I get the base64 of the canvas and append it as an <img> , the img is also 400x400. But I want the <canvas> and the <img> to be 200x200 as well.

How do I fix this ?

Answer 1

You have not provided your HTML code, which is necessary. But if I understand you correctly, the video is not the size of the canvas.
The canvas must have its size set in both the styles and attributes, so this is incorrect:

<style>
  canvas {
    height: 400px;
    width: 400px;
  }
</style>
<canvas></canvas>

And this is correct:

<style>
  canvas {
    height: 400px;
    width: 400px;
  }
</style>
<canvas width="400px" height="400px"></canvas>

Answer 2

Had to change setup() to:

function setup() {
  createCanvas(canvasSize, canvasSize)
  video = createCapture(VIDEO)
  video.size(canvasSize, canvasSize)
  video.elt.height = canvasSize
  video.elt.width = canvasSize
}