lukehaas / shapely Goto Github PK

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
	});

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

textWidth()

textHeight()

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)

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

• 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.

• 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.

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)

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