Applying image filters to canvas image data or in JavaScript

Question

I'm a Flash developer, and I'm working on a JavaScript port of a game. In the Flash version, I use glow, blur and color matrix filters to manipulate the appearances of display objects. I would like to do the same with my JavaScript view. Some of these are embellishments, while others are used to carefully produce a desired result. Because this project's goals are to create an exact port, I'm wondering what options I have to apply filters to raw canvas data, to inline SVG tags or to straight up DOM elements.

I've considered Pixastic, but my collaborator insists on a GPL license for the time being, which means any tech I use must be GPL compatible. Pixastic uses the Mozilla Public License, so I can't use it. (Which is a huge bummer, let me tell you.)

I'll say it again concisely: how do I efficiently apply pixel filters to DOM elements, to canvas image data or to SVG tags with JavaScript?

Answer 1

Here's an example showing some svg filtering:

• http://xn--dahlstrm-t4a.net/svg/filters/colormatrix/svgimagefiltering.xhtml

and the corresponding canvas version:

• http://people.opera.com/patrickl/experiments/canvas/image-edit/

Here are some js libraries for canvas doing what I think you're looking for:

• http://mezzoblue.github.com/PaintbrushJS/demo/
• https://github.com/pnitsch/BitmapData.js

A number of svg filter examples can be found on http://svg-wow.org (CC0 licensed).