convolve

Canvas convolution filters

convolve

Canvas convolution filter.

Return a new convolution Filter with the given matrix.

Change the factor to n, defaults to 1.

Change the bias to n, defaults to 0.

Canvas width.

Canvas height.

Apply the convolution filter to the input ImageData, populating the result ImageData. This is a lower-level method, you most likely want to apply to the entire canvas, in which case use below:

Apply the convolution filter to the entire canvas and immediately draw the results.

var convolve = require('convolve');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
 
var img = new Image;
img.onload = draw;
img.src = 'maru.jpg';
 
var sharpen = [
  [-1, -1, -1],
  [-1, 9, -1],
  [-1, -1, -1]
];
 
var blur = [
  [0, .2, 0],
  [.2, .2, .2],
  [0, .2, 0],
];
 
// factor 1 / 7 
var motionBlur = [
  [1, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 0],
  [0, 0, 0, 0, 1, 0, 0],
  [0, 0, 0, 0, 0, 1, 0],
  [0, 0, 0, 0, 0, 0, 1]
];
 
var edges = [
  [0, -1, 0],
  [-1, 4, -1],
  [0, -1, 0]
];
 
function draw() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  convolve(motionBlur)
    .factor(1 / 7)
    .canvas(canvas);
}

License

MIT