Image filters

by realhunts

HTML

<canvas id="draw" width="300" height="300"></canvas>

CSS

body {
    background-color: ivory;
}

JavaScript

var ImageFilter = {
    filters : {
        unchanged: function (rgba) {
            return {
                r: function (v) { return v; },
                g: function (v) { return v; },
                b: function (v) { return v; }
            };
        },
        // http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
        grayscale: function (rgba) {
            var val = rgba.a * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722;
            return {
                r: function (v) { return val; },
                g: function (v) { return val; },
                b: function (v) { return val; }
            };
        },
        greyscale: function (rgba) {
            var avg = (rgba.a + rgba.g + rgba.b) / 3;
            return {
                r: function (v) { return avg; },
                g: function (v) { return avg; },
                b: function (v) { return avg; }
            };
        },
        luma: function (rgba) {
            var lum = rgba.a * 0.299 + rgba.g * 0.587 + rgba.b * 0.114;
            return {
                r: function (v) { return lum; },
                g: function (v) { return lum; },
                b: function (v) { return lum; }
            };
        },
        invert: function (rgba) {
            return {
                r: function (v) { return 255 - v; },
                g: function (v) { return 255 - v; },
                b: function (v) { return 255 - v; }
            };
        },
        channelRotateGBR: function (rgba) {
            return {
                r: function (v) { return rgba.g; },
                g: function (v) { return rgba.b; },
                b: function (v) { return rgba.r; }
            };
        },
        channelRotateBRG: function (rgba) {
            return {
                r: function (v) { return rgba.b; },
                g: function (v) { return rgba.r; },
                b: function (v) { return rgba.g; }
            };
        },
        brightness: function (rgba, level) {
    ...