HTML5 Canvas CRT Filter

Note: This may be the coolest thing I’ve ever done.

So, over the last couple of weeks I’ve been a bit obsesed with the idea of CRT filters. The concept involves making the graphics look like they’re being displayed on a CRT T.V. by adding in color distortion, scan lines and bloom.

It all started with wanting to get a small CRT T.V. to play the SNES on, I saw one leaving Sean’s and couldn’t stop thinking about the idea of how old games look better on old T.V.s. From there it evolved into the fact that, eventually, there will be no functional CRT T.V.s anywhere, which made me a little sad, I really think some games look better when being displayed via CRT. Then, the idea of simply having an algorithm to reproduce CRT output came up, I was curious the algorithm needed to do something like that. The new Street Fighter III: Third Strike on PSN/Xbox has this option and I was curious if it was accurate or not (did they just put black lines every other pixel to represent scan lines or did color from the surrounding pixels bleed into the scan line like it should be).

Continue reading HTML5 Canvas CRT Filter