HTML5 Canvas Library
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
$ npm install art-canvas
or,
$ bower install art-canvas
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);
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
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);
In the case of drawing by pen,
// Change mode
artCanvas.setMode(ArtCanvas.Mode.HAND);
The line is drawn by drag on canvas.
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.
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);
In the case of drawing image,
var src = /* image file path */;
artCanvas.drawImage(src);
In the case of using eraser,
artCanvas.setMode(ArtCanvas.Mode.ERASER);
var result = artCanvas.undo();
if (!result) {
// Cannot Undo
}
var result = artCanvas.redo();
if (!result) {
// Cannot Redo
}
artCanvas.clear();
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
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);
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
// 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);
Copyright (c) 2012, 2013, 2014 Tomohiro IKEDA (Korilakkuma)
Released under the MIT license