<canvas>字母形状的clearRect（）

Question

I've recently started learning web techniques, so I'm still a newbie regarding pretty much everything. I've stumbled upon this portfolio site, link , which I'm trying to "recreate" as part of my learning process/practice.

Here I'm interested in the background of the page, and how to make that transparent letter on canvas. In my current work, I have a html background image set, fillRect() on a full screen with opacity of 0.9 , and now I don't know how to make use of clearRect().

The question is: Am I on the right track, and is there any way that I'm not aware of, in which I can use clearRect() to clear pixels on canvas in a letter shape? Like, without manually defining a path for clearRect(), but where I would only input a letter and clear pixels in its shape. Sorry if I posted my current code below the wrong way, it's my first time posting here.

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);
    }
});

Answer 1

You can achieve effects such as this using globalCompositeOperation .

Here's an example where some text is used as shape to erase drawn pixels:

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);

Here's the JSFiddle: http://jsfiddle.net/eSpUv/