npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

art-canvas2

v2.0.3

Published

HTML5 Canvas Library. Fork of https://github.com/Korilakkuma/ArtCanvas

Downloads

10

Readme

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