filters.js

var filters = (function() {

    var filters = {};

    var utils = {};

    utils.getData = function(context) {
        return context.getImageData(0, 0, context.canvas.width, context.canvas.height);
    };
    utils.fmt = function(val) {
        return Math.min(255, val);
    };

    filters.brightness = function(context, val) {
        var idata = utils.getData(context),
            data = idata.data;
        for( var i = 0, l = data.length; i < l; i+= 4 ) {
            data[i] = utils.fmt( data[i] + 255 * val);
            data[i+1] = utils.fmt( data[i+1] + 255 * val);
            data[i+2] = utils.fmt( data[i+2] + 255 * val);
        }
        context.putImageData(idata, 0, 0);
    };

    filters.contrast = function(context, val) {
        var idata = utils.getData(context),
            data = idata.data,
            ctable = [];
        for (var i = 0; i < 256; i++) {
            var newVal = i / 255;
            newVal -= 0.5;
            newVal *= val;
            newVal += 0.5;
            newVal *= 255;
            ctable[i] = newVal < 0 ? 0 : newVal > 255 ? 255 : newVal;
        }
        for (var i = 0, l = data.length; i < l; i += 4) { 
            data[i] = ctable[data[i]];
            data[i + 1] = ctable[data[i + 1]];
            data[i + 2] = ctable[data[i + 2]];
        }
        context.putImageData(idata, 0, 0);
    };

    filters.sepia = function(context, val) {
        var idata = utils.getData(context),
            data = idata.data;
        val = val || 1;
        for( var i = 0, l = data.length; i < l; i+= 4 ) {
            var r = data[i],
                g = data[i+1],
                b = data[i+2];

            data[i] = utils.fmt(  (r * (0.393 * val)) + (g * (0.769 * val)) + (b * (0.189 * val)));
            data[i+1] = utils.fmt(  (r * (0.349 * val)) + (g * (0.686 * val)) + (b * (0.168 * val)));
            data[i+2] = utils.fmt(  (r * (0.272 * val)) + (g * (0.534 * val)) + (b * (0.131 * val)));
        }
        context.putImageData(idata, 0, 0);
    };

    filters.greyscale = function(context, val) {
        var idata = utils.getData(context),
            data = idata.data;
        val = val || 1;
        for( var i = 0, l = data.length; i < l; i+= 4 ) {
            var avg = Math.floor(((data[i] + data[i+1] + data[i+2]) / 3)*val);
            data[i] = avg;
            data[i+1] = avg;
            data[i+2] = avg;
        }
        context.putImageData(idata, 0, 0);
    };

    filters.colorize = function(context, color, val) {
        var idata = utils.getData(context),
            data = idata.data;
        val = val || 1;
        for( var i = 0, l = data.length; i < l; i+= 4 ) {
            var avg = Math.floor(((data[i] + data[i+1] + data[i+2]) / 3)*val);
            data[i] = utils.fmt( avg + color.r);
            data[i+1] = utils.fmt( avg + color.g);
            data[i+2] = utils.fmt( avg + color.b);
        }
        context.putImageData(idata, 0, 0);
    };

    filters.tint = function(context, color) {
        var idata = utils.getData(context),
            data = idata.data;
        for( var i = 0, l = data.length; i < l; i+= 4 ) {
            var r = color.r/100 || 1,
                g = color.g/100 || 1,
                b = color.b/100 || 1;
            data[i] = utils.fmt( data[i] * r);
            data[i+1] = utils.fmt( data[i+1] * g);
            data[i+2] = utils.fmt( data[i+2] * b);
        }
        context.putImageData(idata, 0, 0);
    };

    filters.invert = function(context) {
        var idata = utils.getData(context),
            data = idata.data;
        for( var i = 0, l = data.length; i < l; i+= 4 ) {
            data[i] = utils.fmt( 255 - data[i]);
            data[i+1] = utils.fmt( 255 - data[i+1]);
            data[i+2] = utils.fmt( 255 - data[i+2]);
        }
        context.putImageData(idata, 0, 0);
    };

    return filters;

}());