Martin.js

Martin.js is a JavaScript library aimed at designers and junior front-end developers seeking a path to easier in-browser photo manipulation and visualization with HTML5 canvas.

Try drawing below (click to reset):

The API for Martin.js is heavily influenced by the popular jQuery library. Given a <canvas> or <img> element with the id foo, it can be used by calling Martin("foo").

var canvas = Martin("foo");

Once it’s been initialized, various photo editing effects can be applied, analogous to Photoshop filters. These include saturation, brightness, opacity, blur, inverting colors, and other effects. These effects can be stacked.

canvas.saturate(50); // amount ranges from 0-100

Adjust the levels below:

← Dark | Light →
← Black & White | Vibrant → ← Sharpen | Blur →

Martin can also be used to draw shapes to the canvas, as data-rich elements that can be updated by the developer or the end user. Elements include geometric shapes such as circles, rectangles, lines, and polygons, or text elements.

canvas.circle({
    radius: 50
});

Martin is interactive, providing a set of event hooks such as clicking on the canvas, hovering over it, mousing over or out, or moving the mouse (as in the above drawing example).

canvas.click(function(e) {
    // draw a circle centered at the click target
    canvas.circle({
        radius: 10,
        x: e.x,
        y: e.y
    });
});

Finally, Martin can be extended – the API provides developers with a means to create “plugins” to store their own effects or elements.

Martin.registerElement('rainbow', function(data) {
    // code to draw a rainbow goes here
});
canvas.rainbow();

Martin.registerEffect('pixelate', function(data) {
    // code to pixelate canvas goes here
});
canvas.pixelate();

Click to add rainbows, adjust pixelation with the slider below:

Pixelate →