Javascript 创建画布并设置其宽度在第二次尝试时失败

我已经创建了两个画布元素进行绘制。它们都是具有不同ID的标准元素

我使用javascript选择第一个，获取上下文，并为两者分配100vw的宽度。按预期工作

我重复完全相同的代码来选择第二个画布，我从相同的画布+上下文选择器中获得一个未定义的对象：

HTML:

JS:

不知道该怎么办。这应该是最基本的

问题在哪里？

ctx.canvas中的canvas是属性，而不是var canvas变量

因此，要从ctxbg上下文访问它，还需要通过.canvas访问它：

<canvas id="canvas"></canvas>
<canvas id="canvasbg"></canvas>

<script>
// select fore and background canvases
var canvas = document.getElementById('canvas'); 
var canvasbg = document.getElementById('canvasbg'); // object found

// get canvas 2D context and set them correct size
var ctx = canvas.getContext('2d'); 
var ctxbg = canvasbg.getContext('2d'); // object found

resize();

function resize() {
  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;

  ctx.canvas.width = winWidth; // works perfectly
  ctx.canvas.height = winHeight; // works perfectly

  ctxbg.canvasbg.width = winWidth; // console error: cannot set widht of undefined....???
  ctxbg.canvasbg.height = winHeight;
}
</script>

  ctxbg.canvas.width = winWidth;
  ctxbg.canvas.height = winHeight;