- var stage = new KeepDraw.Stage({
- width: 300,
- height: 300,
- canvas: 'id',
- fill: '#000'
- });
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"
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]
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
- });