PaintbrushJS, Canvas Wrapper, Rangy

27 Aug 2010 | By Alex Young | Tags graphics canvas

PaintbrushJS

PaintbrushJS by Dave Shea, released under the MIT License, is a browser-based image processing library. It creates a canvas that contains the image and applies various image filtering algorithms. There’s a page of demos that illustrate the effects.

The effects work by getting pixels with getImageData then looping through them and applying the selected filter.

CanvasContext2DWrapper

CanvasContext2DWrapper by Miller Medeiros, released under the prestigious WTFPL license, wraps canvas context 2D properties to allow method chaining:

contextWrapper.fillStyle('#F00').fillRect(25,25,100,100).fillStyle('#0F0').fillRect(50,50,100,100);

Rangy

I hate dealing with range selection. I can’t remember if it’s due to IE, or if every browser does it differently, but I have a piece of JavaScript I’ve been using to do this for years and I barely remember how it works. Rangy by Tim Down (MIT License) is a library that addresses this lapse in my pragmatism. It’s currently pre-alpha, but already has some useful functionality:

var range = rangy.createRange();

// All DOM Range methods and properties supported
range.selectNodeContents(document.body);

// All HTML5 Selection methods and properties supported
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);

blog comments powered by Disqus