HTML5 Video on Canvas + pixel manipulation

One of my latest experiments was to create a fullscreen background with a video, for this I used HTML5 video tag and loaded it on a canvas element.
Although it worked it somehow felt incomplete because it was simply a video as background, it needed some edge add to it, for this I decided to use Pixelate library http://close-pixelate.desandro.com/ and extend it so it supported video as well as images.
Github extension can be found also here:

What we are doing here is to actually pass the video and the browser width & height to the draw function that calls the Pixelate library and returns the modified canvas pixels back, then we draw the pixels by calling

2 Responses to HTML5 Video on Canvas + pixel manipulation

hey man, I know this post is a year old now but if you’re still around: do you know why the video blacks out at the end when running this? normally when I have a video set to loop it’ll loop without having to stop and replay but when I’m running it through the pixelator it stops for a split second, screen goes black, then restarts. any ideas? thanks!

Nightly Newsletter

This is the second part (and most recent) of a parallax tutorial and animation using GSAP TweenMax. Before we begin a little bit of theory behind the parallax effect. Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and … Continue reading →

Hello, recently I was working on a project where I wanted to get all the images from the camera but because I wanted to load them in batches I had to find their filenames and store them in a local array for future use. Since the new cordova file plugin … Continue reading →

Hello all I have launched another game on codecanyon which uses Phaser.io at its core, it is an arcade game of sorts like lunar-lander but with a shark… and rockets… and traps and you must never touch the floor, ok its nothing like lunar-lander apart from the low-gravity… Check it … Continue reading →

Recently as I was building a new game, I realized that one of the most re-used elements across a variety of games is the “modal”, whether it is a countdown, a message modal or a game-over modal. So I thought to create a little snippet that would make creating a … Continue reading →

Lately I have been using Phaser.io as a game framework/engine. And one thing that is quite tedius, is to manage your Sprites and animation frames, it is roughly 40% of your game development time. However there is one tool that now -that officially supports Phaser- cuts down this time at … Continue reading →