有几篇文章询问如何在画布元素中设置背景颜色，然后在该背景上绘制不同的颜色。我无法让这个工作。

我这里有一把小提琴（jsfiddle）

基本思想是：超文本标记语言

<div id="main"></div>

基于jQuery的js：

$('<canvas>')
  .attr('id', 'theCanvas')
  .attr('width', 200)
  .attr('height', 100)
  .appendTo('#main');

const myCanvas = document.getElementById('theCanvas');
const ctx = myCanvas.getContext('2d');
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0, 0, myCanvas.innerWidth, myCanvas.innerHeight);

ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillRect(20, 20, myCanvas.innerWidth - 20, myCanvas.innerHeight - 20);

有些CSS在画布周围画边框：

#theCanvas {
  border: 1px solid black;
}

最终结果是白色矩形周围的黑色边框。我希望是黑色矩形，带有一个“插入”白色矩形，周围有20px“边框”。

我错过了什么？