如何让canvas的宽高保持和父盒子一致给我详细的代码

HTML代码：

<div id="parent">
  <canvas id="myCanvas"></canvas>
</div>

CSS代码：

#parent {
  width: 500px;
  height: 300px;
}

#myCanvas {
  width: 100%;
  height: 100%;
}

JavaScript代码：

var canvas = document.getElementById('myCanvas');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

解释说明：

• 父盒子的宽高可以根据实际需求进行设置。
• canvas的宽高设置为100%可以让其与父盒子保持一致。
• 使用JavaScript代码使canvas的实际宽高与CSS样式中设置的宽高保持一致。