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…

No Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *