convolve

convolve

Canvas convolution filter.

API

convolve(input, result, width, height, matrix)

Apply convolution filter matrix to the given input, populating result.

convolve.canvas(canvas, matrix)

Apply the given convolution matrix to canvas and draw the results to its 2d context.

Example

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 = [
  [0, -3, 0],
  [-3, 21, -3],
  [0, -3, 0]
];

var blur = [
  [1, 1, 1],
  [1, 1, 1],
  [1, 1, 1]
];

var emboss = [
  [-18, -9, 0],
  [-9, 9, 9],
  [0, 9, 18]
];

var edges = [
  [0, 9, 0],
  [9, -36, 9],
  [0, 9, 0]
];

function draw() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  var data = ctx.getImageData(0, 0, img.width, img.height);
  var result = ctx.createImageData(img.width, img.height);
  convolve(data, result, img.width, img.height, edges);
  ctx.putImageData(result, 0, 0);
}

License

MIT