Transparent Green Screen Video With HTML Canvas

Looking for true alpha transparency?
Check out Making Videos with Alpha Transparency for the Web.

I saw an article on MDM Webdocs that demonstrated how you can use HTML Canvas to make transparent video. 

I decided to mess around with their code in Code Pen.  You can check out the code here

To see the demo, push play on the video.  Then Scroll down to see the canvas result.

Original Video
Canvas #1 (simply reproduces the video in an HTML canvas) Canvas #2 (makes the green pixels transparent).

The result isn’t perfect.  there’s some green spillover (which is much more noticeable on a darker background) and there isn’t a true alpha channel.  But for the most part it looks pretty decent!

To be totally honest I don’t completely understand the original code, but I was able to modify it enough to try and push it beyond the original (rather rough) demo.

If anyone has any suggested improvements to the code let me know in the comments section below…

True Alpha Transparency Option

There is another option that allows you to have full alpha transparency on your videos, but requires you to create a video with the mask stacked directly below it as shown below.

No Comments

Write a Reply or Comment

Your email address will not be published.