fabric.js image filters

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width="640" height="300"></canvas>
Sharpen: <input type=range id=mix min=5 max=10 value=5 onchange="update()">

CSS

#canvas {
    box-shadow: 0 0 5px 1px black;
}

JavaScript

var imgURL = "http://fabricjs.com/assets/dragon2.jpg";//'http://cdn2.hubspot.net/hub/20286/file-13400665-jpg/images/coloured_pencils.jpg';

var canvas = new fabric.Canvas('canvas');
var ctx = canvas.getContext("2d");
    
var pugImg = new Image();
pugImg.onload = function (img) {    
    var pug = new fabric.Image(pugImg, {
        angle: 0,
       
        left: 10,
        top: 10,
       scaleX: 0.2,
       scaleY: 0.2,
    });
    canvas.add(pug);
};
pugImg.src = imgURL;

function sharpen(ctx, w, h, mix) {
	console.log(mix);
		var obj = canvas.getActiveObject();
    if (!obj) return;
 		obj.filters = [
      new fabric.Image.filters.Convolute({
        matrix: [ 0, -1, 0, -1, mix, -1, 0, -1, 0 ]
      })
    ];
    var _canvas = canvas;
  	obj.applyFilters(function() {
    	_canvas.renderAll(); 
    });
    /* var weights = [0, -1, 0, -1, 5, -1, 0, -1, 0],
        katet = Math.round(Math.sqrt(weights.length)),
        half = (katet * 0.5) | 0,
        dstData = ctx.createImageData(w, h),
        dstBuff = dstData.data,
        srcBuff = ctx.getImageData(0, 0, w, h).data,
        y = h;
    
    while (y--) {
    
        x = w;
    
        while (x--) {
    
            var sy = y,
                sx = x,
                dstOff = (y * w + x) * 4,
                r = 0,
                g = 0,
                b = 0,
                a = 0;
    
            for (var cy = 0; cy < katet; cy++) {
                for (var cx = 0; cx < katet; cx++) {
    
                    var scy = sy + cy - half;
                    var scx = sx + cx - half;
    
                    if (scy >= 0 && scy < h && scx >= 0 && scx < w) {
    
                        var srcOff = (scy * w + scx) * 4;
                        var wt = weights[cy * katet + cx];
    
                        r += srcBuff[srcOff] * wt;
                        g += srcBuff[srcOff + 1] * wt;
                        b += srcBuff[srcOff + 2] * wt;
                        a += srcBuff[srcOff + 3] * wt;
           ...