如何将HTML Canvas下载图片的背景设置为白色？

问题根源：你给Canvas设置的style={{backgroundColor:"white"}}是CSS样式，Canvas自身的绘图区域默认是透明的。使用toDataURL导出时，只会捕获Canvas绘图上下文（ctx）中的内容，不会包含CSS定义的背景色，因此导出的PNG透明区域会被查看器默认显示为黑色。

解决方案 #

1. 在绘图时填充白色背景

修改drawShapes函数，在清除画布后立即绘制白色背景，确保绘图上下文内存在白色底色：

function drawShapes() {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 新增：先填充白色背景到绘图上下文
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    shapes.forEach((shape) => {
      ctx.beginPath();
      ctx.moveTo(shape?.points[0]?.x, shape?.points[0]?.y);
      shape.points.forEach((point) => {
        ctx.lineTo(point.x, point.y);
      });
      ctx.strokeStyle = shape.color;
      ctx.lineWidth = shape.strokeWidth;
      ctx.stroke();
    });

    if (currentStroke.length > 0) {
      ctx.beginPath();
      ctx.moveTo(currentStroke[0].x, currentStroke[0].y);
      currentStroke.forEach((point) => {
        ctx.lineTo(point.x, point.y);
      });
      ctx.strokeStyle = color;
      ctx.lineWidth = 2;
      ctx.stroke();
    }

    requestAnimationFrame(drawShapes);
}

2. 简化下载函数

现在绘图上下文已经包含白色背景，无需额外的恢复逻辑，简化downloadCanvas函数：

const downloadCanvas = () => {
    const canvas = canvasRef.current;
    const image = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    const time = new Date();
    const imageName = time.toISOString();
    link.download = `${params.workspaceId}-${imageName}.png`;
    link.href = image;
    link.click();
};

额外说明

• 原clearCanvas函数已包含填充白色背景的逻辑，无需修改；
• 页面上的style={{backgroundColor:"white"}}可以保留，确保Canvas在页面上的显示效果一致。

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