如何设置HTML Canvas前景色与背景色？我的实现为何不符合预期

你犯了两个关键错误：

1. 误用了错误的尺寸属性 #

Canvas元素没有innerWidth和innerHeight属性——这俩是window对象的专属属性，用来获取浏览器视口尺寸。你之前的代码里，myCanvas.innerWidth和myCanvas.innerHeight实际返回undefined，Canvas会把这个值解析为0，导致黑色背景矩形根本没被绘制出来。

正确的做法是用Canvas元素自身的width和height属性，这两个值就是你设置的绘图区域实际尺寸（200x100）。

2. 白色矩形的尺寸计算错误 #

你想要四周留20px的边距，白色矩形的宽度应该是总宽度减去左右各20px（即200-40=160），高度同理是100-40=60。之前只减20的话，右边和下边的边距会是0，矩形会撑满到画布边缘。

修正后的完整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.width, myCanvas.height);

// 绘制带20px边距的白色矩形
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillRect(20, 20, myCanvas.width - 40, myCanvas.height - 40);

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