Javascript <；帆布>；字母形状的clearRect（）

我最近开始学习网络技术，所以我对几乎所有事情都是新手。我偶然发现了这个公文包网站，我正试图“重建”它，作为我学习过程/实践的一部分

这里我感兴趣的是页面的背景，以及如何在画布上制作透明的字母。在我目前的工作中，我有一个html背景图像集fillRect（），全屏显示，不透明度为0.9，现在我不知道如何使用clearRect（）

问题是：我的思路是否正确，是否有任何我不知道的方法可以使用clearRect（）清除画布上字母形状的像素？比如，不需要手动为clearRect（）定义路径，但我只需要输入一个字母并清除其形状中的像素。对不起，如果我把我当前的代码贴错了，这是我第一次在这里发布

var canvas = document.getElementById('layout');
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}
$(document).ready(function() {
    window.addEventListener('resize', setCanvasSize); //false
    window.addEventListener('resize', draw); //false
    //set canvas size----------------------------------------
    setCanvasSize();

    function setCanvasSize() {
        canvas.width = $(window).width();
        canvas.height = $(window).height();
    }
    //draw---------------------------------------------------
    draw();

    function draw() {
        var x = canvas.width;
        var y = canvas.height;
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, x, y);
        ctx.clearRect(50, 30, 110, 35);
    }
});

---

您可以通过使用来实现类似这样的效果

下面是一个示例，其中一些文本用作形状以擦除绘制的像素：

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
var ctx = canvas.getContext("2d");

document.body.appendChild(canvas);

ctx.fillStyle = "rgba(255, 255, 255, 0.8";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = "destination-out";
ctx.font = "70pt Arial";
ctx.fillText("Text", 50, 130);

以下是JSFIDLE：