canvas类型为HTMLCanvasElement|null，调用clearRect报错求解决

• 错误根源：clearRect 并非 HTMLCanvasElement 自身的方法，而是其**2D渲染上下文（CanvasRenderingContext2D）**的方法，直接调用canvas元素的clearRect必然会触发类型错误。
• 正确实现方式：
  1. 先通过canvas元素获取对应的2D渲染上下文
  2. 确认上下文存在后，调用上下文的clearRect方法（该方法需传入4个参数：清除区域的起始x坐标、起始y坐标、宽度、高度）

示例代码：

const canvas = this.canvas;
if (canvas) {
  // 获取2D渲染上下文
  const ctx = canvas.getContext('2d');
  if (ctx) {
    // 清除整个画布区域
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
}

• 简化写法（使用可选链）：

this.canvas?.getContext('2d')?.clearRect(0, 0, this.canvas?.width || 0, this.canvas?.height || 0);

内容的提问来源于stack exchange，提问作者Павел Соляник