KeepDraw.js - javascript framework for drawing on canvas

Hello. This article focuses on the library for drawing on canvas - KeepDraw.
This is a framework for working with canvas 2d with support for events and animation.

Distinctive features:

1. API in OOP style;
2. Events for the mouse, keyboard and touch screens;
3. Animation support;
4. Drawing bezier curves on points;
5. Many functions that check the intersection of figures and points;
6. Fill shapes with gradients and images;
7. Object templates are line, rectangle, text, polygon, and circle.
8. Mobile support.
9. Smoothing shapes using bezier curves.
10. Lightweight. The compressed version weighs 15 kilobytes.

Introduction

The main object on the canvas is Stage. It specifies the width of the canvas, the block div identifier (canvas), the height and the background. Stage.childs includes all visible shapes on the canvas. For each canvas, you can specify one Stage object. If you have specified the stage and the figures, you can start the animation or the events.

Code example:

//  var stage = new KeepDraw.Stage({ width: innerWidth, height: innerHeight, canvas: 'canvas', fill: '#00afff' }); //  var circle = new KeepDraw.Circle({ x: innerWidth / 2, y: innerHeight / 2, radius: innerHeight / 3, color: 'white', stage: stage }); 

Key figures

In KeepDraw there are: a rectangle (Rect), a regular polygon (Polygon), Text (Text), a Line or a private figure (Line).
')

An example of your own figure:

 var stage = new KeepDraw.Stage({ width: innerWidth, height: innerHeight, canvas: 'canvas', fill: '#00afff' }); var line = new KeepDraw.Line({ x: 100, y: 50, segments: [[0,0,-70,0,-70,100],[0,100,70,100,130,10],[200,10,270,10,270,108.94],[200,100,130,100,70,0.3],[0,0,-70,0]], color: 'white', strokeWidth: 5, strokeColor: '#30ccff', stage: stage }); 

Styles

The following values ​​can be applied to all shapes:

• color - Fill (color, gradient or image);
• strokeColor - the color of the stroke;
• strokeWidth - the width of the stroke;
• shadowColor - the color of the shadow;
• shadowWidth - the width of the shadow;
• lineCap - stroke of line segments (usual - butt, rectangular - square, oval - round;
• lineJoin - stroke of the ends of the line (usual - mitter, rectangular - bevel, oval - round;
• shadowOffsetX - shadow shift along the x axis;
• shadowOffsetY - shift of the shadow along the y axis;
• font - text font (size and font);
• opacity - opacity (0 - 1);

Code example:

 var stage = new KeepDraw.Stage({ width: innerWidth, height: innerHeight, canvas: 'canvas', fill: '#00afff' }); var circle = new KeepDraw.Circle({ x: innerWidth / 2, y: innerHeight / 2, radius: innerHeight / 6, color: 'rgba(255, 255, 255, 0.5)', strokeColor: 'white', shadowWidth: 100, strokeWidth: 20, shadowColor: 'rgba(0,0,0,0.5)', stage: stage }); 

Additional functions

All figures have their own functions:

• toLine () - convert any shape into a line;
• smooth (strength 0 - 3) - smoothing using bezier, applicable only to the line;
• endPoints () - returns an array of extreme points: [top [x, y], bottom [x, y], left [x, y], right [x, y]];
• clone () - returns a clone shape;
• star () - makes the line look like a star;
• floor () - rounds all values ​​in the figure object;
• setAttrs (object) - assigns the object values ​​to the shape;
• simplify (periodicity) - uniformly removes line segments;
• reflect (in width, in height), true or false - reflects the line;
• inScreen () - determines whether a figure is visible on the screen;
• inDistance (minX, minY, maxX, maxY) - determines whether the figure is at a certain distance;
• rotate (degrees, [x, y]) - rotates a line around its axis or point;

Developments

You can sign events to the figures (click, mousedown, touchstart and others);

→ Example

Animation. You can set the animation in several ways:

  Stage.Animation: stage.draw = function(diff) { if (poly.x > innerWidth * 0.88) vel = -1; if (poly.x < innerWidth * 0.12) vel = 1; poly.rotate(vel * diff); poly.x += innerHeight / 150 * vel; }; var anim = new KeepDraw.Animation(stage); 

→ Demo

Or via tween:

 var tween = new KeepDraw.Tween(poly, { age: 40, end: 5000, attrs: { x: innerWidth, opacity: 0 } }); tween.play(); var anim = new KeepDraw.Animation(stage); 

→ Demo

Conclusion

→ Online image editor based on KeepDraw - roundraw.imtqy.com ;
→ Github
→ Homepage - keepdraw.imtqy.com