https://github.com/groenroos/gullwings

Draw curly braces in canvas
https://github.com/groenroos/gullwings

canvas javascript

Last synced: 1 day ago
JSON representation

Draw curly braces in canvas

• Host: GitHub
• URL: https://github.com/groenroos/gullwings
• Owner: groenroos
• Created: 2015-05-19T23:26:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-05-19T23:37:57.000Z (over 9 years ago)
• Last Synced: 2023-03-16T06:40:17.581Z (over 1 year ago)
• Topics: canvas, javascript
• Language: JavaScript
• Size: 117 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Gullwings

---------

Draw curly braces in canvas, by [@groenroos](http://twitter.com/groenroos).

* Draws a curly brace in the given space

* Can draw it in any direction

* Customize color, stroke thickness, and point placement

* No dependencies

* 973 bytes minified and gzipped

### Usage

Include `gullwings.min.js`. Then simply do;

    Gullwings.init(".gullwings");

For the `init` method, you can pass either a query string, or an element object.  The element you pass should be a container for the curly braces (such as a `div`); Gullwings will create its own canvas.  To control the size of the curly brace, give the container a size in CSS.  Gullwings will use all available space.

Optionally, you can also pass a second argument for options (detailed below).

#### Available methods

* `init` — draw some curly braces.  First argument is either a query string or an element object that you want to turn into curly braces; second argument is an optional settings object.

* `destroy` — destroys instances of Gullwings.  Pass either a query string or an element object as an argument to destroy specific instances, or pass nothing to destroy everything.

#### Available options

You can pass an object as the second argument for the `.init()` call, to override the default settings.

* `direction` — the direction the curly brace should face.  Either "left", "right", "up" or "down".  Default: *left*

* `thickness` — thickness of the stroke.  Default: *1*

* `point` — the position of the point of the curly brace.  If the value is a float from 0 to 1, Gullwings treats it as a percentage (0.5 is 50%). If you pass an integer larger than 1, it's treated as a pixel value.  Default: *0.5*

* `color` — the color of the curly brace in HEX.  Default: *#212121*

* `sharpness` — how tight the curve radius should be.  The larger the number, the smaller the curves.  Default: *1.5*

### Bugs & Support

Developed by [@groenroos](http://twitter.com/groenroos).  Please list all bugs and feature requests in the [Github issue tracker](https://github.com/groenroos/gullwings/issues).

Licensed under the MIT license.