title: Equivalent of canvas "destination-out" for normal html element?
body: <p>I've searched around quite a bit and I'm fairly certain this doesn't exist, I'm mainly looking to confirm that.  What I'd like to do is have a div that makes everything behind it transparent -- similar to what canvas' destination-out compositing option does.</p>
  
  <p>For a little more context, here's the situation.  I have an OpenGL window drawing behind a QtWebKit overlay.  The OpenGL window has multiple "subwindows" that can be overlapping, which are decorated using the WebKit overlay.  When they overlap though, because of this two layer system, the decorations for the overlapped windows do not get occluded.</p>
  
  <p>The backup option is just to use a full-window canvas for this (the window trimmings are fairly simple), but it would be nicer not to.  Note that because this is an embedded WebKit instance, it doesn't need to be cross-browser, and something WebKit (or QtWebKit) specific is fine.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I can't answer my own question within 24 hours, so here's my solution, with thanks to @Kevin Peno</p>
  
  <p>The following is a simplified version of what I was looking for.  It creates two divs "visible" and "invisible".  "invisible" masks off "visible" so that it displays the background image behind it instead of the "visible" div.</p>
  
  <p>The real keys are -webkit-mask-image (<a href="http://www.webkit.org/blog/181/css-masks/" rel="nofollow">http://www.webkit.org/blog/181/css-masks/</a>) and -webkit-canvas (<a href="http://www.webkit.org/blog/176/css-canvas-drawing/" rel="nofollow">http://www.webkit.org/blog/176/css-canvas-drawing/</a>), so this will only work with webkit-based browsers.</p>
  
  <p>HTML:</p>
  
  <pre>
  <code>
  &lt;html&gt;
  &lt;body&gt;
    &lt;div id="visible"/&gt;
    &lt;div id="invisible"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code>
  </pre>
  
  <p>JavaScript:</p>
  
  <pre>
  <code>
  function updateMask()
  {
      var w = $("#visible").width();
      var h = $("#visible").height();
      var context = document.getCSSCanvasContext("2d", "mask", w, h);
      context.fillStyle = "rgba(255, 255, 255, 1.0)";
      context.fillRect(0, 0, w, h);
  
      var my_off = $("#visible").offset();
      var inv_off = $("#invisible").offset();
      var rel_left = inv_off.left - my_off.left;
      var rel_top = inv_off.top - my_off.top;
      context.clearRect(rel_left, rel_top, $("#invisible").width(), $("#invisible").height());
  }
  
  $(window).ready(function()
  {
     updateMask();
  
  
     $("#invisible").draggable();
     $("#invisible").bind("drag", function(e, ui)
         {
             console.log("drag");
             updateMask();
             e.preventDefault();
         });
  });
  </code>
  </pre>
  
  <p>CSS:</p>
  
  <pre>
  <code>
  body
  {
    background-image: url(http://www.google.com/images/logos/ps_logo2.png);
  }
  
  #visible
  {
    position: absolute;
    background-color: red;
    z-index: 0;
    width: 1000px;
    height: 1000px;
    top: 0;
    left: 0;
    -webkit-mask-image: -webkit-canvas(mask);
  }
  
  #invisible
  {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
    cursor: move;
    background-color: rgba(0, 255, 0, 0.5);
  }
  </code>
  </pre>