如何使用JavaScript将画布的背景色设置为白色？ 我想做什么

我想知道如何使背景色变成白色

我用画布构建了一个绘图应用程序。您可以通过单击下载按钮下载绘制的画布图像。但它的背景色是黑色（技术上是透明的）

我怎样才能把它换成白色

---

我试过的 我在代码中添加了以下代码，但效果不好。我什么都不会画

ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

---

这是我的密码

---

我想将下载图像的背景色设置为白色。

您可以使用以下代码设置画布的背景色

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
context.fillStyle=“绿色”；
context.fillRect（0,0，canvas.width，canvas.height）
canvas{边框：1px纯黑；}
在画布上，可以使用
getAttribute（）
检索维度。请看我的代码片段：


let canvas=document.getElementById（'canvas'）；
让cheight=parseInt（canvas.getAttribute（“height”）；
设cwidth=parseInt（canvas.getAttribute（“宽度”）；
让context=canvas.getContext（'2d'）；
context.fillStyle=“绿色”；
fillRect（0,0，cwidth，cheight）
在
draw（）
函数中，您需要专门添加如下背景：

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';
ctx.fillStyle = "#ffffff"; //HERE, use HEX format in 6 digits
ctx.fillRect(0, 0, canvas.width, canvas.height); //HERE

 ...

function draw(e) {
    ...
}

为什么？
您需要在所有内容之前绘制背景，否则反复绘制背景或在所有内容之上绘制背景将导致白色矩形与画布上的所有内容重叠

这是一个。
您尝试了
ctx.fillRect（）
，但它不在您的代码中。你把它放在哪里了？我删除了ctx.fillRect（）。我稍后会发布同样的问题并提供更多细节，因为我现在还没有编辑我的问题的特权。你没有编辑问题的特权是什么意思。这不是特权，在1个代表处您已经可以。关闭另一个作为复制。谢谢你的建议，但我以前试过你的代码。我不能用鼠标在画布上画任何东西。它不能作为绘图应用程序使用。画布只显示绿色。我仍然没有编辑我的问题的特权。稍后我会发布同样的问题和更多细节。谢谢你的建议，但我以前试过你的代码。我不能用鼠标在画布上画任何东西。它不能作为绘图应用程序使用。画布只显示绿色。那么您的绘图代码可能有问题，您应该打开另一个问题。我仍然没有编辑我的问题的特权。稍后我将发布同样的问题，并提供更多细节。谢谢你的建议，谢谢你的回答。我在我的代码中复制并粘贴了你的代码。那我就什么也画不出来了。我想我应该展示更多我的代码。有人建议我提出另一个问题。我将在稍后发布同样的问题和更多细节。@MiuTaji我设法分析了您的代码并为您提供了解决方案。它在现场演示中。现在，图像以白色背景下载。请让我知道它是否有帮助。非常感谢您的现场演示。我想我的绘图代码有问题。我将
ctx.fillStyle
和
ctx.fillRect
添加到与您相同的位置。我又提出了一个更详细的问题。如果您能检查并回答，我将不胜感激。
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';
ctx.fillStyle = "#ffffff"; //HERE, use HEX format in 6 digits
ctx.fillRect(0, 0, canvas.width, canvas.height); //HERE

 ...

function draw(e) {
    ...
}