Javascript 如何在HTML画布上使颜色透明？

我有一个HTMLCanvasElement，上面已经画了东西，我需要使它的区域透明。我不知道那个区域的坐标，所以我不能使用路径，但我知道我想要去除的颜色

具体地说，我有一个html元素，其中包含按此处建议的顺序排列的文本：我在画布元素上绘制它，如此处建议的：

问题是，在进一步使用之前，我想使文本的白色核心在生成的canvas元素上透明。这样就只剩下文本的笔划了

为什么我不直接在画布上画文本？原因是我需要调整字母间距，只有CSS样式可以做到这一点

代码片段有点不可读，因为实际上它是通过使用Bridge.Net编译C#生成的，但应该给出我尝试执行的总体思路：

ConstructLabel$1: function (toWrite, font, letterSpacing, labelConstructed) {
            if (toWrite == null || Bridge.referenceEquals(toWrite, "")) {
                return null;
            }
            var canvas = document.createElement("canvas");
            var textElement = document.createElement("div");
            textElement.style.width = "auto";
            textElement.style.position = "absolute";
            textElement.style.whiteSpace = "nowrap";
            textElement.style.letterSpacing = letterSpacing;
            textElement.style.font = font;

            //make the storking of text
            textElement.style.color = "white";
            textElement.style.textShadow = "-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000";

            textElement.textContent = toWrite;

            //ToCanvas is my wrapper that takes a HTML element and returns a new canvas that
            //will draw a 1:1 representation of that element on it. It executes
            //the callback after it being drawn.
            return Utility.ToCanvas(textElement, function (drawnCanvas) {
                var ctx = drawnCanvas.getContext("2d");
                //ctx.ClearColor("white"); <----- how to do this?
                labelConstructed(drawnCanvas);
            });
        }

ConstructLabel$1:函数（toWrite、字体、字母间距、labelConstructed）{
if（toWrite==null | | Bridge.referenceEquals（toWrite，“”）{
返回null；
}
var canvas=document.createElement（“canvas”）；
var textElement=document.createElement（“div”）；
textElement.style.width=“自动”；
textElement.style.position=“绝对”；
textElement.style.whiteSpace=“nowrap”；
textElement.style.letterSpacing=字母间距；
textElement.style.font=font；
//使文本的存储成为可能
textElement.style.color=“白色”；
textElement.style.textShadow=“-1px-1px 0#000,1px-1px 0#000，-1px 1px 0#000,1px 1px 0#000”；
textElement.textContent=toWrite；
//ToCanvas是我的包装器，它接受一个HTML元素并返回一个新的画布
//将在其上绘制该元素的1:1表示形式。它执行
//在绘制回调后，将调用它。
return Utility.ToCanvas（textElement，function（drawnCanvas））{
var ctx=drawnCanvas.getContext（“2d”）；
//ctx.ClearColor（“白色”）；我终于在这里找到了答案：这里应用的是：

ConstructLabel$1: function (toWrite, font, letterSpacing, labelConstructed) {

            [code here as earlier]

            return Utility.ToCanvas(textElement, function (drawnCanvas) {
                var ctx = drawnCanvas.getContext("2d");
                var matrix = ctx.getImageData(0, 0, drawnCanvas.width, drawnCanvas.height);
                var data = matrix.data;
                for (var i = 0; i < data.length; i = (i + 4) | 0) {
                    if (((((data[i] + data[((i + 1) | 0)]) | 0) + data[((i + 2) | 0)]) | 0) === 765) {
                        data[((i + 3) | 0)] = 0;
                    }
                }
                ctx.putImageData(matrix, 0, 0);
                labelConstructed(drawnCanvas);
            });
        },

ConstructLabel$1:函数（toWrite、字体、字母间距、labelConstructed）{
[此处代码与前面相同]
return Utility.ToCanvas（textElement，function（drawnCanvas））{
var ctx=drawnCanvas.getContext（“2d”）；
var矩阵=ctx.getImageData（0,0，drawnCanvas.width，drawnCanvas.height）；
var数据=矩阵数据；
对于（变量i=0；i

由于混叠，这确实会在文本的内侧留下一些大致为白色的像素，但如果需要，可以通过更改像素条件来纠正

像这样进行过滤的结果应该被缓存，因为逐像素进行过滤是一个很长的循环。
我建议用一个演示问题的示例更新您的问题，最好是使用堆栈片段（
[]
工具栏按钮；）运行的问题。这将使问题变得非常清楚，而不需要人们在非现场关注链接，并使他们更容易向您展示解决方案。我无法使其运行，但示例代码段无论如何都会出现……为什么不呢？在代码段中使用
画布
，没有问题。还请注意，您发布的不是远程MCVE。请阅读链接页面以了解详细信息。因为这与包含Utility.ToCanvas（）以使其可运行相比是最小的。