Javascript 将画布背景色更改为透明

我在画布下有一个文本，我想在擦除画布背景色时显示它。现在它是红色的，当我写透明时它不工作。我需要在用鼠标画图时显示文本。我也尝试过rgba，但它不起作用

如果可以，请帮助我

enter code here

var cont=document.getElementById（“点”），//UI元素
canvas=document.getElementById（“canvas”），
alpha=document.getElementById（“alpha”），
模式=document.getElementById（“模式”），
ctx=canvas.getContext（“2d”），
isDown=false，//默认值
color=“红色”；
//使用自定义“点”对象设置调色板
//这将在单击时使用回调函数，以
//更改当前颜色
功能点（颜色、连续、回调）{
var div=document.createElement（“div”）；
div.style.cssText=“宽度：50px；高度：50px；边框：1px实心#000；边距：0 1px 1px 0；背景：+颜色；
div.onclick=function（）{callback（color）}；
续儿童组（分区）；
}
//在调色板容器中添加一些专色
新斑点（颜色、连续、设置颜色）；
//这将根据单击的点设置当前填充样式
函数setColor（c）{ctx.fillStyle=c}
//设置默认值
ctx.fillStyle=颜色；
ctx.globalAlpha=1；
//事件
canvas.onmousedown=function（）{isDown=true}；
window.onmouseup=function（）{isDown=false}；
window.onmousemove=函数（e）{
如果（！isDown）返回；
var r=canvas.getBoundingClientRect（），
x=e.clientX-r.left，
y=e.clientY-r.top；
ctx.beginPath（）；
弧（x，y，25，0，2*Math.PI）；
ctx.fill（）；
};
。主要内容{
位置：相对位置；
宽度：300px；
高度：300px；
}
.正文{
位置：绝对位置；
右：0；
左：0；
文本对齐：居中；
z指数：8；
字体大小：35px；
}
#帆布{
背景颜色：绿色；
位置：绝对位置；
z指数：9；
}

你赢了
我想您希望得到类似下面代码片段中的解决方案


var cont=document.getElementById（“点”），//UI元素
canvas=document.getElementById（“canvas”），
alpha=document.getElementById（“alpha”），
模式=document.getElementById（“模式”），
ctx=canvas.getContext（“2d”），
isDown=false，//默认值
color=“绿色”；
//使用自定义“点”对象设置调色板
//这将在单击时使用回调函数，以
//更改当前颜色
功能点（颜色、连续、回调）{
var div=document.createElement（“div”）；
div.style.cssText=“宽度：50px；高度：50px；边框：1px实心#000；边距：0 1px 1px 0；背景：+颜色；
div.onclick=函数（）{
回调（颜色）
};
续儿童组（分区）；
}
//在调色板容器中添加一些专色
新斑点（颜色、连续、设置颜色）；
//这将根据单击的点设置当前填充样式
函数setColor（c）{
ctx.fillStyle=c
}
//设置默认值
ctx.fillStyle=颜色；
ctx.globalAlpha=1；
//使用画布函数而不是CSS创建矩形
//背景色。
const createRect=（ctx、宽度、高度）=>{
ctx.fillRect（0，0，宽度，高度）
}
createRect（ctx，300300）
//事件
canvas.onmousedown=函数（）{
isDown=true
};
window.onmouseup=函数（）{
isDown=false
};
window.onmousemove=函数（e）{
如果（！isDown）返回；
var r=canvas.getBoundingClientRect（），
x=e.clientX-r.left，
y=e.clientY-r.top；
//这里需要更多的代码：
ctx.fillStyle=“rgba（255、255、255、0.5）”
ctx.save（）；
ctx.globalCompositeOperation='destination out'；
ctx.beginPath（）；
弧（x，y，25，0，2*Math.PI，false）；
ctx.fill（）；
ctx.restore（）；
};
。主要内容{
位置：相对位置；
宽度：300px；
高度：300px；
}
.正文{
位置：绝对位置；
右：0；
左：0；
文本对齐：居中；
z指数：8；
字体大小：35px；
}
#帆布{
/*背景颜色：绿色*/
位置：绝对位置；
z指数：9；
}

你赢了
你已经成功了一半，但有两件事需要改变。
您试图做的是通过画布更改css属性的外观，但实际情况并非如此。您也不能改变画布的透明度，但是有解决方案，而且非常简单

您需要将背景色应用到画布上，然后使用完全相同的绘图功能删除像素，然后设置一个名为的额外属性，这基本上是photoshop的“BlendMode”

下面是您的更新代码：


var cont=document.getElementById（“点”），//UI元素
canvas=document.getElementById（“canvas”），
alpha=document.getElementById（“alpha”），
模式=document.getElementById（“模式”），
ctx=canvas.getContext（“2d”），
isDown=false，//默认值
color=“红色”；
//使用自定义“点”对象设置调色板
//这将在单击时使用回调函数，以
//更改当前颜色
功能点（颜色、连续、回调）{
var div=document.createElement（“div”）；
div.style.cssText=“宽度：50px；高度：50px；边框：1px实心#000；边距：0 1px 1px 0；背景：+颜色；
div.onclick=function（）{callback（color）}；
续儿童组（分区）；
}
//在调色板容器中添加一些专色
//新斑点（颜色、连续、设置颜色）；
//这将根据单击的点设置当前填充样式
函数setColor（c）{ctx.fillStyle=c}
//设置默认值
ctx.fillStyle=颜色；
ctx.globalAlpha=1；
//画背景
ctx.fillRect（0,0300300）；
//添加“混合模式效果”
ctx.globalCompositeOperation='destination out'；
//事件
canvas.onmousedown=function（）{isDown=true}；
window.onmouseup=function（）{isDown=false}；
window.onmousemove=函数（e）{
如果（！isDown）返回；
var r=canvas.getBoundingClientRect（），