title: <canvas> clearRect() in a letter shape
body: <p>I've recently started learning web techniques, so I'm still a newbie regarding pretty much everything. I've stumbled upon this portfolio site, <a href="http://www.jcsuzanne.com/#/project/thomas-ciszewski-photography/" rel="nofollow">link</a>, which I'm trying to "recreate" as part of my learning process/practice. </p>
  
  <p>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().</p>
  
  <p>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.</p>
  
  <pre><code>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);
      }
  });
  </code></pre>