KeepDraw Download Tutorials Reference Github Examples Get Started

Reference

Shapes

Stage Circle Line Rect

Style

color stroke shadow fill opacity
Stage
Keepdraw.Stage - is the main element of KeepDraw Framework. It contains all other elements, and tweens. Each other element requires link to name of container stage, which specified in object property "stage"
  • var stage = new KeepDraw.Stage({
  • width: 300,
  • height: 300,
  • canvas: 'id',
  • fill: '#000'
  • });
Circle
Circle - is a constructor for drawing circles. It`s doesn`t supports ellipses. You need to specify center coordinates of a circle, and it`s radius.
  • var circle = new KeepDraw.Circle({
  • x: 50,
  • y: 50,
  • radius: 50,
  • color: '#000',
  • stage: stage
  • });
Line
KeepDraw.Line - with this constrictor you can draw lines with multiple segments, quadratic and bezier curves.
Segment subarray can be in 3 states:
For curve [x, y];
For quadratic curve: [x, y, center x, center y];
For bezier curve: [x, y, previous center x, previous center y, next center x, next center y]
  • var line = new KeepDraw.Line({
  • x: 50,
  • y: 50,
  • segments: [[0, 0], [50, 50], [0, 0], [50, 50]]
  • strokeColor: '#000',
  • stage: stage
  • });
Rect
Keepdraw.Rect - use this constructor for drawing rectangles through specifying it`s width and height.
  • var rect = new KeepDraw.Rect({
  • x: 50,
  • y: 50,
  • width: 50,
  • height: 50,
  • color: '#000',
  • stage: stage
  • });
Regular polygon
KeepDraw.Polygon - you can use this constructor for drawing regular polygons. You should specify radius and number of sides.
  • var polygon = new KeepDraw.Polygon({
  • x: 50,
  • y: 50,
  • radius: 50
  • sides: 5
  • strokeColor: '#000',
  • stage: stage
  • });