如何将画布上绘制的路径保存为JavaScript中的函数？

// 创建一个空数组，用于存储路径的坐标点
var path = [];

// 监听画布上的鼠标事件
canvas.addEventListener('mousedown', function(event) {
  // 将鼠标的坐标点添加到数组中
  path.push({ x: event.clientX, y: event.clientY });
});

canvas.addEventListener('mousemove', function(event) {
  // 在移动事件中，如果鼠标按下，则将鼠标的坐标点添加到数组中
  if (event.buttons === 1) {
    path.push({ x: event.clientX, y: event.clientY });
  }
});

canvas.addEventListener('mouseup', function(event) {
  // 将数组中的坐标点转换为绘制路径的函数
  var drawPath = function(context) {
    context.beginPath();
    context.moveTo(path[0].x, path[0].y);
    for (var i = 1; i < path.length; i++) {
      context.lineTo(path[i].x, path[i].y);
    }
    context.stroke();
  };

  // 将路径函数保存在一个变量中
  var savedPath = drawPath;

  // 调用路径函数进行绘制
  savedPath(context);

  // 清空路径数组
  path = [];
});