What is CamanJS?

Pure Javascript (Ca)nvas (Man)ipulation

The main focus of CamanJS is manipulating images using the HTML5 canvas and Javascript. It's a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which is only growing as the community makes more plugins. It has a powerful layering system, much like the one present in Photoshop and GIMP, that makes the sky the limit for your creativity.

Example Manipulation

original modified
Before After

The Code

<script type="text/javascript" src="caman.full.min.js"></script>

<script type="text/javascript">
Caman("images/example-image.jpg", "#example-canvas", function () {
	this
		.saturation(20)
		.gamma(1.4)
		.vintage()
		.contrast(5)
		.exposure(15)
		.vignette(300, 60)
		.render();
});
</script>

<canvas id="#example-canvas"></canvas>

Download CamanJS

Latest Stable

Version 3.1.1 — Feb 3, 2012

Bleeding Edge

Current code in repository

CDN JS

CDN Hosting Solution

How Can I Get Involved?

You don't have to be a Javascript ninja in order to get involved with CamanJS. In fact, making preset filters is extremely simple and is a lot of fun! Of course, if you do fall under the ninja category and would like to contribute to the core library, that's totally cool too.

CamanJS is completely open-source and is hosted on GitHub. Simply fork the project, make your changes, and send a pull request.

Browser Compatibility

Due to the advanced nature of CamanJS and the reliability/speed/consistency of various browser Javascript engines, CamanJS works better in some browsers than others.

Recommended Browsers

  • Google Chrome
  • Safari 5+
  • Firefox 4+
  • Opera 10+
  • Internet Explorer 9+
Fork me on GitHub