Transparent Text over Video using Canvas and JavaScript

Recently I saw an implementation on Apple Site , where a transparent text is placed over the video. It will look like as show below:

Transparent Text Over Video

Here i am sharing my experience on recreating the above feature.You can find the working code-pen here

Logic: The logic which i used here is to keep a canvas above the video and draw the video on the canvas.Then use the clip-path and filter CSS property together to make the text transparent.

Step1: Setup the HTML. It will have a video section, canvas section and svg section.

Step2: Apply the CSS as in the codepen. The few key CSS features which we are using is filter and clip-path. The filter property defines visual effects (like blur and saturation) to an element. The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area.

Step3: Next is to add some JavaScript code where we will be drawing the video on the canvas. For the demo purpose i used the x and y coordinates as 0 and 0.This you can change based on the requirement.

That’s it! here goes the developed preview.

Transparent Text Over Video

Try it and let me know if you guys face any issues, Happy to help

Happy Reading!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store