Shapely - JavaScript canvas library
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example remove dependency on the DOM Nov 12, 2017
.gitignore improve formatting Nov 22, 2016
README.md add textHeight method Dec 19, 2017
license.txt First commit of alpha shapely.js Feb 6, 2013
package.json fix text height bug Dec 21, 2017
shapely.js fix text height bug Dec 21, 2017

README.md

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

Getters

textWidth()

textHeight()

Style

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.

Animation

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)

Easing

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