Using HTML5 Canvas to "Cut Holes" in your Webpage Foreground and "See through" it

Ok, so the title is a bit extreme but this is a technique I've used before to create a "see through" effect on my web apps. In my experience with working on Television apps, we often have to "cut holes" in our app UI so we can see the television video stream playing in the background, and most of the time we need this effect to be "dynamic", for example, we need to cut holes in the app UI at different co-ordinates and at different times. As it's not static we cant have multiple PNG images with transparency for each look and then swap them as needed, this is just not an optimum solution.

So let's look at an example use for this technique:

• Let's say we are building a HTML5 video player app to run in the browser.

• We use a HTML5 Video Tag to play out a video.

• We now want to display some user interface that will appear on top of this video and let a user interact with the app. For example, you can annotate the video being played in the background or add some of your own controls like pause, play etc

To bring up this user interface on top of the video, we can create a large foreground PNG and position it on top of the video. The PNG can have some transparency set on it at certain places so you can see through to the video.

Now setting transparency on the foreground PNG works well if you know exactly where you want to "Cut Holes", but what if it's "dynamic" and you want to cut holes wherever you want. This would involve you having multiple PNG files for different looks and swapping it, and this if obvisouly not the best approach as mentioned above.

The solution is to use a foreground HTML5 Canvas layer and then use JavaScript to cut holes at any co-ordinates and whenever you want.

Layer a Canvas element on top of your Video element
and then cut holes in it. See example below

Let's take a look at a working example and code. It's best you click through to the full screen example here to see code and effect or click on the "Result" tab below to see it working.

function createHolesInBg() {
    // overlay and image on the video and make a hole to see through to the video
    var image = document.getElementById('bg-one');
    var canvas = document.getElementById("window-canvas");
    var ctx = canvas.getContext("2d");
  
    ctx.drawImage(image, 0, 0);

    // cut the 1st hole
    window.setTimeout(function() {
      ctx.clearRect(50, 50, 300, 200);
    }, 1000);

    // cut the 2nd hole
    window.setTimeout(function() {
      ctx.clearRect(300, 300, 350, 280);
    }, 1500);
    
    // cut the 3rd hole
    window.setTimeout(function() {
      ctx.clearRect(800, 50, 400, 300);
    }, 2000);
};

// show video for 5 seconds and then start to cut some holes overlay bg
window.setTimeout(function() {
  createHolesInBg();
}, 5000);

See the Pen HTML5 Canvas "See Through" effect by Mark Paul (@newbreedofgeek) on CodePen.

What am I doing in this example?

• I've got an HD video playing in the background.

• I have a Canvas element also in HD resolution layered on top of the video.

• I then have a normal Image tag with my foreground UI in the DOM (but hidden from view).

• Then using JavaScript, I assign the hidden Image object to the Canvas layer and I can then cut holes through it as I need.

Hope you find this technique useful in your Web app projects. This will be especially useful in web based Video apps.


Happy Coding Code Junkies!