Canvas convolution filters
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
History.md
Makefile
Readme.md
component.json
index.html
index.js
maru.jpg
maru_edges.jpg
package.json

Readme.md

convolve

Canvas convolution filter.

API

convolve(matrix)

Return a new convolution Filter with the given matrix.

Filter#factor(n)

Change the factor to n, defaults to 1.

Filter#bias(n)

Change the bias to n, defaults to 0.

Filter#width(n)

Canvas width.

Filter#height(n)

Canvas height.

Filter#apply(input, result)

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:

Filter#canvas(canvas)

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

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 = [
  [-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