art-canvas2
v2.0.3
Published
HTML5 Canvas Library. Fork of https://github.com/Korilakkuma/ArtCanvas
Downloads
10
Maintainers
Readme
ArtCanvas
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.
- HTMLElement (that is parent node of HTMLCanvasElement)
- HTMLCanvasElement
- Canvas Width
- 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