Canvas仅显示图片左上角问题：同尺寸设置下仍异常求助

我有一张640x692的JPG图片（Emperor_Penguin_Manchot_empereur.jpg），希望将其粘贴到Canvas中。为此我编写了以下代码：

const canvasRef = useRef();
useEffect(() =>{
  var chara= new Image();
  chara.src = "http://localhost:8021/Emperor_Penguin_Manchot_empereur.jpg";

  chara.onload = () => {
    var ctx = canvasRef.current.getContext('2d');
    ctx.drawImage(chara,0,0,640,692,0,0,640,692);// paste the image as the same size.
}

return
<canvas ref={canvasRef} style={{width:640,height:692}}></canvas>

原始图片尺寸为640x692，但运行脚本后，Canvas仅显示图片的左上角部分。我已将Canvas的样式尺寸设置为与图片一致，请问问题出在哪里？

原因分析及解决方法 #

核心原因 #

Canvas存在两个独立的尺寸控制：

1. 绘图缓冲区尺寸：通过canvas元素的width和height属性设置，这是Canvas实际用来绘制图像的像素区域大小，默认值为300x150。
2. CSS显示尺寸：通过style设置的宽高，仅控制Canvas在页面上的显示大小，不会改变实际绘图区域。

你只设置了CSS显示尺寸，没有给canvas元素本身指定width和height属性，导致绘图区域还是默认的300x150。即使CSS把Canvas放大到640x692，也只能显示300x150范围内的图像内容，也就是图片的左上角部分。

修复后的代码 #

const canvasRef = useRef();
useEffect(() =>{
  const chara = new Image();
  chara.src = "http://localhost:8021/Emperor_Penguin_Manchot_empereur.jpg";

  chara.onload = () => {
    const ctx = canvasRef.current.getContext('2d');
    ctx.drawImage(chara, 0, 0, 640, 692, 0, 0, 640, 692);
  };
}, []) // 添加空依赖数组，避免组件重复渲染时重复加载图片

return (
  <canvas 
    ref={canvasRef} 
    width={640} 
    height={692} 
    style={{width: 640, height: 692}}
  ></canvas>
);

额外注意点 #

1. 给useEffect添加空依赖数组，防止组件每次渲染都重新创建Image对象并加载图片。
2. return后的JSX需要用括号包裹，否则会被JavaScript自动插入分号，导致return语句提前结束，无法返回canvas元素。
3. 修复了原代码中chara.onload回调未正确闭合的语法问题。

内容的提问来源于stack exchange，提问作者whitebear