lilo-lala-canvas

lil

lil.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

Using lil.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection. Also you can switch to points mode and manipulate shapes by predefined or autogenerated anchor points.

Non-Technical Introduction to lil

lil.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML <canvas> element on a webpage using JavaScript. lil.js will then allow you to manipulate the size, position and rotation of these objects with a mouse. It’s also possible to change some of the attributes of these objects such as their color, transparency, depth position on the webpage or selecting groups of these objects using the lil.js library. lil.js will also allow you to convert an SVG image into JavaScript data that can be used for putting it onto the <canvas> element.

Goals

• Unit tested (1150+ tests at the moment, 79%+ coverage)
• Modular (~60 small classes", modules, mixins)
• Cross-browser
• Fast
• Encapsulated in one object
• No browser sniffing for critical functionality
• Runs under ES5 strict mode
• Runs on a server under Node.js (active stable releases and latest of current)
• Follows Semantic Versioning

Supported browsers

• Firefox 2+
• Safari 3+
• Opera 9.64+
• Chrome (all versions)
• IE10, IE11, Edge

You can run automated unit tests right in the browser.

History

lil.js started as a foundation for design editor. The main ideea is to accumulate graphic design and painting tools opportunities all together in one tool. The idea was to create Javascript-based editor, which would make it easy to manipulate vector shapes and images on T-Shirts. Since performance was one of the most critical requirements, we chose canvas over SVG. While SVG is excellent with static shapes, it's not as performant as canvas when it comes to dynamic manipulation of objects (movement, scaling, rotation, etc.). In fact, code from Ernest's experiment was the foundation of an entire framework.

Install with bower

$ bower install lil

Install with npm

To install lil.js using npm, you must first manually install Cairo on your system. Cairo is a system library which powers node-canvas, which lil.js relies on. When the installation is complete, you may need to restart your terminal or command prompt before installing lil.

$ npm install lil --save

Building

1. Install Node.js

2. Build distribution file [~77K minified, ~20K gzipped]

    $ node build.js
   

   2.1 Or build a custom distribution file, by passing (comma separated) module names to be included.

      $ node build.js modules=text,serialization,parser
      // or
      $ node build.js modules=text
      // or
      $ node build.js modules=parser,text
      // etc.
   

   By default (when none of the modules are specified) only basic functionality is included. See the list of modules below for more information on each one of them. Note that default distribution has support for static canvases only.

   To get minimal distribution with interactivity, make sure to include corresponding module:

      $ node build.js modules=interaction
   

   2.2 You can also include all modules like so:

      $ node build.js modules=ALL
   

   2.3 You can exclude a few modules like so:

      $ node build.js modules=ALL exclude=gestures,image_filters
   

3. Create a minified distribution file

    # Using YUICompressor (default option)
    $ node build.js modules=... minifier=yui
   
    # or Google Closure Compiler
    $ node build.js modules=... minifier=closure
   

4. Enable AMD support via require.js (requires uglify)

    $ node build.js requirejs modules=...
   

5. Create source map file for better productive debugging (requires uglify or google closure compiler).
   More information about source maps.

    $ node build.js sourcemap modules=...
   

   If you use google closure compiler you have to add sourceMappingURL manually at the end of the minified file all.min.js (see issue https://code.google.com/p/closure-compiler/issues/detail?id=941).

    //# sourceMappingURL=lil.min.js.map
   

6. Ensure code guidelines are met (prerequisite: npm -g install eslint)

    $ npm run lint && npm run lint_tests
   

Testing

1. Install Node.js

2. Install NPM, if necessary

3. Install NPM packages

    $ npm install
   

4. Run test suite

Make sure testem is installed

    $ npm install -g testem

Run tests Chrome and Node (by default):

    $ testem

See testem docs for more info: https://github.com/testem/testem

Demos

• Demos

Documentation

Documentation is always available at http://liljs.com/docs/.

Optional modules

These are the optional modules that could be specified for inclusion, when building custom version of lil:

• text — Adds support for static text (lil.Text)
• itext — Adds support for interactive text (lil.IText, lil.Textbox)
• serialization — Adds support for loadFromJSON, loadFromDatalessJSON, and clone methods on lil.Canvas
• interaction — Adds support for interactive features of lil — selecting/transforming objects/groups via mouse/touch devices.
• parser — Adds support for lil.parseSVGDocument, lil.loadSVGFromURL, and lil.loadSVGFromString
• image_filters — Adds support for image filters, such as grayscale of white removal.
• easing — Adds support for animation easing functions
• node — Adds support for running lil under node.js, with help of jsdom and node-canvas libraries.
• freedrawing — Adds support for free drawing
• gestures — Adds support for multitouch gestures with help of Event.js
• object_straightening — Adds support for rotating an object to one of 0, 90, 180, 270, etc. depending on which is angle is closer.
• animation — Adds support for animation (lil.util.animate, lil.util.requestAnimFrame, lil.Object#animate, lil.Canvas#fxCenterObjectH/#fxCenterObjectV/#fxRemove)
• point_ctions — Adds support for anchor points manipulation (lil.util.switchLinesMode, lil.util.generateCircle, lil.util.recalculatePoints)

Additional flags for build script are:

• requirejs — Makes lil requirejs AMD-compatible in dist/lil.js. Note: an unminified, requirejs-compatible version is always created in dist/lil.require.js
• no-strict — Strips "use strict" directives from source
• no-svg-export — Removes svg exporting functionality
• sourcemap - Generates a sourceMap file and adds the sourceMappingURL (only if uglifyjs is used) to dist/lil.min.js

For example:

node build.js modules=ALL exclude=json no-strict no-svg-export

Examples of use

Adding red rectangle to canvas

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
 
    <script src="lib/lil.js"></script> 
    <script>
        var canvas = new lil.Canvas('canvas');
 
        var rect = new lil.Rect({
            top : 100,
            left : 100,
            width : 60,
            height : 70,
            fill : 'red'
        });
 
        canvas.add(rect);
    </script> 
</body>
</html>

Helping lil

• lil on Bountysource
• lil on CodeTriage

Staying in touch

Follow @lil.js, @MikeTevanyan on twitter or @MikeTevanyan on Linkedin.

Get help in lil's IRC channel — irc://irc.freenode.net/#lil.js

Credits

• @MikeTevanyan
• @LilitVahradyan
• @KarenMinasyan

MIT License

Copyright (c) 2019-2020 MikayelTevan, Lilit Vahradyan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.