Ever needed to adjust the brightness of an image? Or maybe you’d like to make an image feel warmer by increasing it’s red channel?
As a followup to my earlier articles, “How You Can Do Cool Image Effects Using HTML5 Canvas” and “How You Can Build an HTML5 Photobooth App“. In these earlier articles, I provided code for a number of separable color filters: grayscale, sepia, red, brighter, darker. All of these filters are classified as color filters where the output value for each pixel relies solely on the input state of the same pixel. It turns out that all of these color filters can all be modeled by a single data driven filter called a Color Matrix Filter which I’ll cover in this article. This filter takes as input a “color matrix” that contains weights (or coefficients) that determine how the output for a given color component relates to the other color components on input.
