shapely-canvas

Shapely - a library for drawing and animating with the canvas ##

It drastically reduces the code necessary for drawing shapes on the canvas, and has zero dependencies (including the DOM).

To invoke Shapely, start by passing it a canvas context (or array of canvas contexts).

shapely(ctx)

From there you can start adding shapes

``
shapely(ctx).circle({
x:20, y:20, radius:200, style:{fill:"#000000"}
}).star({
x:100, y:200, radius:100, style:{strokeColor:"#000000"}
}).rect({
x:400, y:500, width:100, height:200, style:{fill:"#FF0000"}
});
`

This example draws a circle, star, and rectangle on the canvas. Each shape instance receives basic size, position rotation, and opacity parameters, as well as a style object which includes parameters for fill and stroke colour and patterns, shadows, and gradients

Shapely can also animate shapes by adding .animate() to the end of a shape declaration, for example:
`
shapely(ctx).circle({
x:20, y:20, radius:200, style:{fill:"#000000"}
}).animate({
x:50, radius:100
})
`
This can be used to animate multiple shapes:
`
shapely(ctx).circle({
x:20, y:20, radius:200, style:{fill:"#000000"}
}).animate({
x:50, radius:100
}).rectangle({
x:20, y:20, width:200, height:200, style:{fill:"#000000"}
}).animate({
x:50, y:90, width:600
});
``

Usage ##

star()
- x
- y
- radius
- rotation - degrees

triangle()
- x
- y
- radius
- rotation - degrees

line()
- x
- y
- width or height - (depending on if vertical or horizontal)
- dashWidth
- dashGap
- rotation - degrees

rect()
- x
- y
- width
- height
- rotation (degrees)
- cornerRadius

circle()
- x
- y
- radius
- rotation (degrees)

polygon()
- x
- y
- sides
- radius
- rotation (degrees)

text()
- x
- y
- value
- align
- baseline
- maxWidth
- lineHeight
- rotation - degrees

image()
- x
- y
- image
- width
- height
- rotation - degrees

$3

textWidth()

textHeight()

$3

The style object is a property within a shape object. It can receive the following values:

- fill - (hex or rgba)
- strokeColor - (hex or rgba)
- strokeWidth
- strokeStyle - only relevant for lines (solid or dashed)
- opacity: (0 - 1)
- pattern - (image)
- font - only relevant for text (example: 80px Arial)

##### shadow #####

- offsetX
- offsetY
- blur
- color - (hex or rgba)

##### fillGradient #####

- type - linear or radial
- positions (object) - for linear - x1,y1,x2,y2
- for radial - x1,y1,r1,x2,y2,r2
- colors (array) - each array element takes the format [colorStop,color], the color stop is a number between 0 and 1. the color values are in hex or rgba format.
As many color stops can be added as needed.

##### strokeGradient #####

- type - linear or radial
- positions (object) - for linear - x1,y1,x2,y2
- for radial - x1,y1,r1,x2,y2,r2
- colors (array) - each array element takes the format [colorStop,color], the color stop is a number between 0 and 1. the color values are in hex or rgba format.
As many color stops can be added as needed.

$3

All basic shape properties can be animated.
The animation method recieves an object of shape properties to be animated, followed by the following additional options:
- duration - (default 1000)
- easing - (default easeInOutSine)
- callback - (on complete)

$3

The following easing functions are available within the library

- linear
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce