Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
src
test
.editorconfig
.gitignore
.jshintrc
.travis.yml
Gruntfile.js
LICENSE
README.md
bower.json
karma.conf.js
package.json

README.md

ArtCanvas

Build Status

HTML5 Canvas Library

Overview

This library enables to create image authoring application like Photoshop.
In concrete, this library may be useful to implement the following features.

  • Layer
  • Draw (Pen, Figure, Text ...etc)
  • Styles (Color, Line Width, Text Styles ...etc)
  • Transforms (Translate, Scale, Rotate)
  • Tools for drawing

Demo

Installation

$ npm install art-canvas

or,

$ bower install art-canvas

Usage

The 1st, ArtCanvas class is required.

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

or,

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

Next, the instance of ArtCanvas must be created.
ArtCanvas constructor requires 4 arguments.

  1. HTMLElement (that is parent node of HTMLCanvasElement)
  2. HTMLCanvasElement
  3. Canvas Width
  4. Canvas Height

for example,

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);

API

Mode

This library has the following modes.

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 and Setter for these mode are the following,

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

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

Layer

Select

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

artCanvas.selectLayer(layerNumber);

Add

artCanvas.addLayer();

Remove

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

artCanvas.removeLayer(layerNumber);

Show / Hide

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

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

Alpha (Opacity)

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

artCanvas.setGlobalAlpha(alpha);

Draw

Pen

In the case of drawing by pen,

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

The line is drawn by drag on canvas.

Figures

In the case of drawing figures,

// 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

The selected figure is drawn by drag on canvas.

Text

In the case of drawing text,

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

Textbox is created by click on canvas.
If text input ended, the text is drawn on canvas by changing to other mode.

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

Image

In the case of drawing image,

var src = /* image file path */;

artCanvas.drawImage(src);

Eraser

In the case of using eraser,

artCanvas.setMode(ArtCanvas.Mode.ERASER);

Edit

Undo

var result = artCanvas.undo();

if (!result) {
    // Cannot Undo
}

Redo

var result = artCanvas.redo();

if (!result) {
    // Cannot Redo
}

Clear

artCanvas.clear();

Styles

fill style / stroke style

It is required that color string (hex, rgb, hsl, rgba, hsla ...etc) is designated for fill style and stroke style.

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

line width

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

artCanvas.setLineWidth(lineWidth, redraw);

line cap

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

artCanvas.setLineCap(lineCap, redraw);

line join

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

artCanvas.setLineJoin(lineJoin, redraw);

Text style

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));

Shadow Effect

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);

Transforms

The first, it is required to change the application mode.

artCanvas.setMode(ArtCanvas.Mode.TRANSFORM);

Next, it is required to designate transform type.

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

Tools

Dropper

// 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();         // #...

Bucket

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

Image Filters

Red-Emphasis

artCanvas.filter(ArtCanvas.Filter.REDEMPHASIS);

Grayscale

artCanvas.filter(ArtCanvas.Filter.GRAYSCALE);

Reverse

artCanvas.filter(ArtCanvas.Filter.REVERSE);

Noise

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

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

Blur

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

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

Export

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);

License

Copyright (c) 2012, 2013, 2014 Tomohiro IKEDA (Korilakkuma)
Released under the MIT license