Javascript在画布上绘制分形，递归保存和恢复问题

<canvas id="fractalCanvas" width="800" height="600"></canvas>

const canvas = document.getElementById('fractalCanvas');
const ctx = canvas.getContext('2d');

function drawFractal(x, y, width, height) {
  // 绘制分形图形的逻辑代码
  // ...
  
  // 递归调用绘制分形的函数
  drawFractal(x, y, width / 2, height / 2);
  drawFractal(x + width / 2, y, width / 2, height / 2);
  drawFractal(x, y + height / 2, width / 2, height / 2);
  drawFractal(x + width / 2, y + height / 2, width / 2, height / 2);
}

// 调用绘制分形的函数
drawFractal(0, 0, canvas.width, canvas.height);

function drawFractal(x, y, width, height) {
  // 保存画布状态
  ctx.save();
  
  // 绘制分形图形的逻辑代码
  // ...
  
  // 恢复画布状态
  ctx.restore();
  
  // 递归调用绘制分形的函数
  drawFractal(x, y, width / 2, height / 2);
  drawFractal(x + width / 2, y, width / 2, height / 2);
  drawFractal(x, y + height / 2, width / 2, height / 2);
  drawFractal(x + width / 2, y + height / 2, width / 2, height / 2);
}