$ npm install art-canvas

$ bower install art-canvas

<script type="text/javascript" src="ArtCanvas.js"></script>

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

var canvas    = document.querySelector('canvas');
var container = canvas.parentNode;
var width     = 600;  // px
var height    = 600;  // px

// Create the instance of ArtCanvas
var artCanvas = new ArtCanvas(container, canvas, width, height);

console.log(ArtCanvas.Mode.HAND);       // This mode is in order to draw by pen
console.log(ArtCanvas.Mode.FIGURE);     // This mode is in order to draw figures
console.log(ArtCanvas.Mode.TEXT);       // This mode is in order to draw text
console.log(ArtCanvas.Mode.TRANSFORM);  // This mode is in order to transform drawn objects
console.log(ArtCanvas.Mode.TOOL);       // This mode is in order to tools for drawing

// Getter
var mode = artCanvas.getMode();  // -> ArtCanvas.Mode.HAND is the default mode

// Setter
artCanvas.setMode(ArtCanvas.Mode.FIGURE);  // -> change mode to ArtCanvas.Mode.FIGURE

var layerNumber = 0;  // This value is number between 0 and (the number of layers - 1)

artCanvas.selectLayer(layerNumber);

artCanvas.addLayer();

var layerNumber = 0;  // This value is number between 0 and (the number of layers - 1)

artCanvas.removeLayer(layerNumber);

var layerNumber = 0;  // This value is number between 0 and (the number of layers - 1)

artCanvas.showLayer(layerNumber);
artCanvas.hideLayer(layerNumber);

var alpha = 0.5;  // This value is number between 0 and 1

artCanvas.setGlobalAlpha(alpha);

// Change mode
artCanvas.setMode(ArtCanvas.Mode.HAND);

// Change mode
artCanvas.setMode(ArtCanvas.Mode.FIGURE);

// Select figure
artCanvas.setFigure(ArtCanvas.Figure.RECTANGLE);  // Draw Rectangle
artCanvas.setFigure(ArtCanvas.Figure.CIRCLE);     // Draw Circle
artCanvas.setFigure(ArtCanvas.Figure.LINE);       // Draw Line

// Change mode
artCanvas.setMode(ArtCanvas.Mode.TEXT);

// Change mode -> The typed text is drawn
artCanvas.setMode(ArtCanvas.Mode.HAND);

var src = /* image file path */;

artCanvas.drawImage(src);

artCanvas.setMode(ArtCanvas.Mode.ERASER);

var result = artCanvas.undo();

if (!result) {
    // Cannot Undo
}

var result = artCanvas.redo();

if (!result) {
    // Cannot Redo
}

artCanvas.clear();

var redraw = true;

artCanvas.setFillStyle('rgba(0, 0, 255, 1.0)', redraw);    // fill style
artCanvas.setStrokeStyle('rgba(255, 0, 0, 1.0)', redraw);  // stroke style

var lineWidth = 3;  // This value is greater than 0
var redraw    = true;

artCanvas.setLineWidth(lineWidth, redraw);

var lineCap = 'round';  // one of 'butt', 'round', 'square'
var redraw  = true;

artCanvas.setLineCap(lineCap, redraw);

var lineJoin = 'round';  // one of 'bevel', 'round', 'miter'
var redraw   = true;

artCanvas.setLineJoin(lineJoin, redraw);

var fontFamily = 'Helvetica';
var fontSize   = '24px';
var fontStyle  = 'oblique';
var fontWeight = 'bold';

// Create the instance of ArtCanvas.Font
var font = new ArtCanvas.Font(fontFamily, fontSize, fontStyle, fontWeight);

// color string (hex, rgb, hsl, rgba, hsla ...etc)
var color = 'rgba(153, 153, 153, 1.0)';

// Set the instance of ArtCanvas.TextStyle
artCanvas.setTextStyle(new ArtCanvas.TextStyle(font, color));

var shadowColor   = 'rgba(0, 0, 0, 0.2)';  // Color string (hex, rgb, hsl, rgba, hsla ...etc)
var shadowBlur    = 3;                     // This value is greater than or equal to 0.
var shadowOffsetX = -3;
var shadowOffsetY = -3;
var redraw        = true;

artCanvas.setShadowColor(shadowColor, redraw);
artCanvas.setShadowBlur(shadowBlur, redraw);
artCanvas.setShadowOffsetX(shadowOffsetX, redraw);
artCanvas.setShadowOffsetY(shadowOffsetY, redraw);

artCanvas.setMode(ArtCanvas.Mode.TRANSFORM);

artCanvas.setTransform(ArtCanvas.Transform.TRANSLATE);  // Translate
artCanvas.setTransform(ArtCanvas.Transform.SCALE);      // Scale
artCanvas.setTransform(ArtCanvas.Transform.ROTATE);     // Rotate

// Get the instance of ArtCanvas.Color
var color = artCanvas.pickColor(event);  // The 1st argument is event object
var rgba  = color.toString();            // rgba(...)
var hex   = color.toHexString();         // #...

artCanvas.fill(event, 'rgba(255, 0, 0, 1.0)');  // The 1st argument is event object

artCanvas.filter(ArtCanvas.Filter.REDEMPHASIS);

artCanvas.filter(ArtCanvas.Filter.GRAYSCALE);

artCanvas.filter(ArtCanvas.Filter.REVERSE);

var width   = artCanvas.getContainerWidth();
var height  = artCanvas.getContainerHeight();
var noise   = 30000
var amounts = [width, height, noise];

artCanvas.filter(ArtCanvas.Filter.NOISE, amounts);

var width   = artCanvas.getContainerWidth();
var amounts = [width];

artCanvas.filter(ArtCanvas.Filter.BLUR, amounts);

var format   = 'png';  // one of 'gif', 'jpg', 'png'
var callback = function(image) {
    // The 1st argument is Data URL of exported image
};

artCanvas.export(format, callback);