UnitaryJS is a library for handling canvas with objects. You don't need to write any code like `ctx.beginPath(); ctx.moveTo(x, y);`.

Demo: Demo

## Quick Example

``````<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>Sample</title>
<script src="./unitary.js"></script>
<script src="./canvas.js"></script>
<script>
const UPoint = Unitary.Point, UTrinangle = Unitary.Triangle;
const A = new UPoint(30,30),
B = new UPoint(90,90),
C = new UPoint(90,40),
ABC = new UTriangle(A, B, C),
circumcircleABC = ABC.getCircumcircle(),
incircleABC = ABC.getIncircle(),
canvas = new Canvas('canvas');
canvas.draw();
</script>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>
``````

## Getting started

``` npm install unitaryjs ```

and require unitaryjs.

``````const Unitary = require('unitaryjs');
Unitary.Vector(1, 1);``````

## Browser

``` <script src="unitary.js"></script> ```

## Classes

### UnitaryObject

Almost all classes inherits this class. I sometimes call classes in UnitaryJS as UnitaryObject in this document.

### BezierCurve

#### constructor

``````BezierCurve(...controlPoints: Point[]);
BezierCurve(controlPoints: Point[]);``````

#### setStep(step)

sets step. t increases from 0 to 1 by step.

#### move(dx, dy)

moves curve by dx and dy. x-coordinate of curve increases by dx. y-coordinate of curve increases by dy. `.move()` don't change itself. `.move()` returns new BezierCurve instance which are moved.

#### name()

returns 'BezierCurve'.

### Circle

#### constructor

``````Circle(center: Point, radius: number)
``````

#### move(dx, dy)

moves circle by dx and dy. x-coordinate of circle increases by dx. y-coordinate of circle increases by dy. `.move()` don't change itself. `.move()` returns new Circle instance which are moved.

#### moveTo(x, y)

moves circle at coordinate(x, y). x-coordinate of circle will be x. y-coordinate of circle will be y. `.moveTo()` doesn't change itself. moveTo() returns new Circle instance which are moved.

#### getEquation()

returns a equation representing the circle.

#### equals(A)

if origin of A and origin of this circle are same and radius of A and radius of this circle are same, .equals(A) returns true. Otherwise .equals(A) returns false.

#### has(P)

if P is in this circle, .has(P) returns true. Otherwise .has(P) returns false.

#### name()

returns 'Circle'.

### CircularSector

#### constructor

``````CircularSector(center: Point, radius: number, endAngle: number, startAngle: number = 0)
``````

#### move(dx, dy)

moves circular sector by dx and dy. x-coordinate of circular sector increases by dx. y-coordinate of circular sector increases by dy. `.move()` don't change itself. `.move()` returns new CircularSector instance which are moved.

#### moveTo(x, y)

moves circular sector at coordinate(x, y). x-coordinate of circular sector will be x. y-coordinate of circular sector will be y. `.moveTo()` doesn't change itself. moveTo() returns new CircularSector instance which are moved.

#### equals(A)

if origin of A and one of this circle are same, radius of A and one of this circle are same, endAngle of A and one of this are same and startAngle of A and one of this are same, .equals(A) returns true. Otherwise .equals(A) returns false.

#### has(P)

if P is in this circular sector, .has(P) returns true. Otherwise .has(P) returns false.

#### name()

returns 'CircularSector'.

### Graph

#### constructor

``````Graph(f: Function, scale: number)
``````

#### setRange(start, end)

sets range of x. Constructor of Graph accpects function. However, it doesn't accept range. So if you want to set range, you have to use `.setRange()`. `.setRange()` changes itself.

#### equals()

always returns `false`.

returns 'Graph'.

### Group

Group contains UnitaryObjects.

#### constructor

``````Group(...objects: UnitaryObject[])
Group(objects: UnitaryObject[])
``````

returns 'Group'.

### Image

#### constructor

``````Image(src: string, startPoint: Point)
``````

#### trim(startPoint, sw, sh, dw, dh)

this method behaves like trim() of HTML5 canvas.

#### resize(dw, dh)

this method behaves like resize() of HTML5 canvas.

#### equals(A)

if A equals this image, .equals(A) returns true. Otherwise .equals(A) returns false.

#### move(dx, dy)

moves image by dx and dy. x-coordinate of image increases by dx. y-coordinate of image increases by dy. `.move()` don't change itself. `.move()` returns new Image instance which are moved.

returns 'Image'.

### Line

Line isn't segment.

#### constructor

``````Line(A: Point, B: Point)
``````

#### move(dx, dy)

moves line by dx and dy. x-coordinate of line increases by dx. y-coordinate of line increases by dy. `.move()` don't change itself. `.move()` returns new line instance which are moved.

#### getEquation()

returns a equation representing the line.

#### toString()

returns the result of `.getEquation()`.

#### inspect()

returns the result of `.getEquation()`.

#### getIntersection(AB)

returns an intersection of the line and line AB. If the line doesn't intersect AB, `.getEquation()` returns false.

#### equals(AB)

if A equals this line, .equals(A) returns true. Otherwise .equals(A) returns false.

returns 'Line'.

### Point

#### constructor

``````Point(x: number, y: number)
``````

#### moveTo(x, y)

moves point at coordinate(x, y). x-coordinate of point will be x. y-coordinate of point will be y. `.moveTo()` doesn't change itself. moveTo() returns new Point instance which are moved.

#### move(dx, dy)

moves point by dx and dy. x-coordinate of point increases by dx. y-coordinate of point increases by dy. `.move()` don't change itself. `.move()` returns new Point instance which are moved.

#### toString()

returns coordinate of point as '(x, y)'.

#### inspect()

returns the result of `.toString()`.

#### equals(A)

if A equals this point, .equals(A) returns true. Otherwise .equals(A) returns false.

return 'Point'.

### Polygon

#### constructor

``````Polygon(...points: Point[])
Polygon(points: Point[])
``````

#### equals()

always returns false.

#### move(dx, dy)

moves polygon by dx and dy. x-coordinate of each vertex increases by dx. y-coordinate of each vertex increases by dy. `.move()` don't change itself. `.move()` returns new Polygon instance which are moved.

#### moveTo(x, y)

moves polygon at coordinate(x, y). x-coordinate of each vertex will be x. y-coordinate of each vertex will be y. `.moveTo()` doesn't change itself. moveTo() returns new Polygon instance which are moved.

#### has(P)

if P is in this polygon, .has(P) returns true. Otherwise .has(P) returns false.

#### name()

returns 'Polygon'.

#### constructor

``````Quadrilateral(A: Point, B: Point, C: Point, D: Point)
``````

#### getArea()

returns the area of this Quadrilateral.

#### move(dx, dy)

moves Quadrilateral by dx and dy. x-coordinate of each vertex increases by dx. y-coordinate of each vertex increases by dy. `.move()` don't change itself. `.move()` returns new Quadrilateral instance which are moved.

#### name()

returns 'Circle'.

### Rect

#### constructor

``````Rect(A: Point, B: Point)
``````

This constructor accepts two arguments. First argument is upper-left corner of this rect. The other is bottom-right corner of this rect.

#### has(P)

if P is in this rect, .has(P) returns true. Otherwise .has(P) returns false.

#### move(dx, dy)

moves the rect by dx and dy. x-coordinate of each vertex increases by dx. y-coordinate of each vertex increases by dy. `.move()` don't change itself. `.move()` returns new Rect instance which are moved.

return 'Rect'.

### Segment

#### constructor

``````Segment(A: Point, B: Point)
``````

#### intersects(L)

if L and this segment intersects, .intersects(L) returns true. Otherwise .intersects(L) returns false. L should be Line or Segment.

#### toLine()

extends this segment infinitely to transform this segment into a line.

#### equals(L)

if L equals this segment, .equals(L) returns true. Otherwise .equals(L) returns false.

#### has(P)

if P is on this segment, .has(P) returns true. Otherwise .has(P) returns false.

#### move(dx, dy)

moves the segment by dx and dy. x-coordinate of this increases by dx. y-coordinate of this increases by dy. `.move()` don't change itself. `.move()` returns new Segment instance which are moved.

#### name()

return 'Segment'.

### Text

#### constructor

``````Text(str: string, P: Point, align: string = 'left', maxWidth: number = null) {
``````

#### strokeOutline()

if you call this method, text will stroke outline.

#### setAlign(align)

sets align of this text.

#### setOutlineColor(color)

sets outline color of this text.

#### setBaseline(base)

sets baseline of this text.

#### setFont(font)

sets font of this text.

#### move(dx, dy)

moves this text by dx and dy. x-coordinate of this increases by dx. y-coordinate of this increases by dy. `.move()` don't change itself. `.move()` returns new Text instance which are moved.

return 'Text'.

### Triangle

This constructor accpects three arguments. The arguments are vertices of the triangle.

``````const ABCD = new Quadrilateral(
new Point(30,30),
new Point(90,90),
new Point(90,40)
);``````

#### constructor

``````Triangle(A: Point, B: Point, C: Point)
``````

#### getCircumcircle()

returns the circumcircle of this triangle.

#### getIncircle()

returns the incircle of thie triangle.

#### getArea()

returns the area of this triangle.

#### getCenter()

returns the centroid of this triangle.

#### move(dx, dy)

moves the triangle by dx and dy. x-coordinate of each vertex increases by dx. y-coordinate of each vertex increases by dy. `.move()` don't change itself. `.move()` returns new Triangle instance which are moved.

#### name()

returns 'Triangle'.

### Vector

Vector aren't drawn on canvas. Vector has two constructors.

``````const vectorA = new Vector(10, 10);
const vectorOA = new Vector.from(new Point(10, 10), new Point(0, 0));``````

#### constructor

``````Vector(v: Point)
Vector(x: number, y: number)
``````

vectorA and vectorOA are same vector.

#### minus(V)

subtracts V from this vector.

#### multiple(k)

multiples this vector by a real number k. this method provides scalar multiplication.

#### product(V)

returns the result of dot product of this vector and V.

#### abs()

returns the length of this vector.

#### equals(A)

if each component of this vector and A is same, .equals(A) returns true. Otherwise .equals(A) returns false.

#### move(dx, dy)

moves this vector by dx and dy. x-component of this vector increases by dx. y-component of this vector increases by dy. `.move()` don't change itself. `.move()` returns new Vector instance which are moved.

return 'Vector'.