File Under: HTML5, JavaScript

Trick Out Your Images With PaintbrushJS

HTML5′s canvas tag is a blank slate that allows you to manipulate all sorts things with JavaScript — everything from complex animations to interactive infographics to videos.

For those that want to trick out their images — including background images set in CSS — developer Dave Shea has released PaintbrushJS, a lightweight image processing library that can apply various visual filters to images on your page.

Behind the scenes, PaintbrushJS uses the HTML5 canvas tag to apply its effects, automatically inserting canvas tags based on class names. You can set effects and control the amount by adding attributes to your tags.

PaintbrushJS works in any modern browser — so, of course, IE 8 and below won’t see the effects.

PaintbrushJS can blur images, add a sepia tone, overlay colors or add noise. For a full list of the effects available, check out the documentation or head over to the demo page to see it in action. If you’d like to experiment with the effects, you can grab PaintbrushJS from its home on Github.

See Also: