canvasLab

HTML5 canvas illustration & animation framework

• Installation
• Usage
• Features
• Development
• Documentation
• Support
• Structure

Installation

Migrate to your desired download location, and download this repository to your system using git clone:

git clone https://github.com/Justin-Byrne/canvasLab.git

📎 Link canvasLab-<version>.js library to your project

    <meta ... >
    <link ... >

    <script src="script/libs/canvasLab-<version>.js"></script>

</head>

A standard and minified version of this library can be found under .\script\distro\

Usage

Initialization

🚚 Load canvasLab through the following initiator

/**
 * Initializes canvasLab
 * @param               {string} [canvas]               Canvas id tag
 */
initCanvasLab ( 'my-canvas-id' );

Features

✏️	🎛️	🎛️	🎛️	🎛️	🎛️	🎛️	🎛️	🎛️	🎛️	🎛️	🎛️
Line
Circle
Ellipse
Rectangle
RoundedRectangle
Text
cImage

Legend

Icons, Names, and Types

✏️ Name Type Line Object Circle Object Ellipse Object Rectangle Object RoundedRectangle Object Text Object cImage Object

🎛️ Name Type Point Subject ControlPoints Subject Anchor Subject Angle Subject Aspect Subject Font Subject Rgb Subject

🎛️ Name Type Stroke Subject Fill Subject Stop Subject Linear Subject Radial Subject Conic Subject Shadow Subject

Development

💻 Developer Suite

See the developer suite to view code examples, accompanied with a real-time code editor.

Documentation

📖 JSDocs

Support

Please open an issue for support.

Structure

.
├── build
│   ├── audio
│   │   ├── failure.mp3
│   │   ├── shrink.mp3
│   │   ├── start.mp3
│   │   └── success.mp3
│   ├── docs
│   │   └── typedef.js
│   ├── compile.sh
│   └── watch.sh
├── docs
│   ├── CHANGELOG.md
│   └── JSDoc.md
├── script
│   ├── distro
│   │   ├── canvasLab-v0.7.210.js    [ 564 kb ]
│   │   ├── canvasLab.min.js         [ 108 kb ]
│   │   └── canvasLab.min.js.map
│   └── source
│       ├── classes
│       │   ├── Core
│       │   │   ├── Object
│       │   │   │   ├── Collections
│       │   │   │   │   ├── Circles.js
│       │   │   │   │   ├── Ellipses.js
│       │   │   │   │   ├── Group.js
│       │   │   │   │   ├── Lines.js
│       │   │   │   │   ├── Rectangles.js
│       │   │   │   │   ├── RoundedRectangles.js
│       │   │   │   │   └── Texts.js
│       │   │   │   ├── Properties
│       │   │   │   │   └── Position.js
│       │   │   │   ├── Circle.js
│       │   │   │   ├── Ellipse.js
│       │   │   │   ├── Line.js
│       │   │   │   ├── Rectangle.js
│       │   │   │   ├── RoundedRectangle.js
│       │   │   │   ├── Text.js
│       │   │   │   └── cImage.js
│       │   │   └── Subject
│       │   │       ├── Collections
│       │   │       │   ├── OptionsCollection.js
│       │   │       │   ├── PointCollection.js
│       │   │       │   ├── ShadowCollection.js
│       │   │       │   └── StrokeCollection.js
│       │   │       ├── Color
│       │   │       │   ├── Gradient
│       │   │       │   │   ├── Properties
│       │   │       │   │   │   └── Stop.js
│       │   │       │   │   ├── Conic.js
│       │   │       │   │   ├── Linear.js
│       │   │       │   │   └── Radial.js
│       │   │       │   └── Model
│       │   │       │       └── Rgb.js
│       │   │       ├── Staging
│       │   │       │   ├── Properties
│       │   │       │   │   ├── Options.js
│       │   │       │   │   └── Range.js
│       │   │       │   ├── Anchor.js
│       │   │       │   ├── Angle.js
│       │   │       │   ├── Aspect.js
│       │   │       │   ├── ControlPoints.js
│       │   │       │   ├── Font.js
│       │   │       │   └── Point.js
│       │   │       ├── Fill.js
│       │   │       ├── Shadow.js
│       │   │       └── Stroke.js
│       │   ├── Data-Structures
│       │   │   └── Queue.js
│       │   ├── Handlers
│       │   │   ├── Animation.js
│       │   │   ├── Animations.js
│       │   │   └── Application.js
│       │   ├── Templates
│       │   │   ├── Transitions
│       │   │   │   └── myTransitions.js
│       │   │   └── SacredCircles.js
│       │   └── canvasLab.js
│       └── components
│           ├── shared
│           │   ├── PropertyBlocks.js
│           │   ├── Utilities.js
│           │   └── Validation.js
│           └── debug.js
├── LICENSE
└── README.md

Copyright

= Byrne-Systems © 2024 - All rights reserved. =