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">
<head>
<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.add(ABC);
canvas.add(circumcircleABC);
canvas.add(incircleABC);
canvas.draw();
</script>
</head>
<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

download dist/unitary.js and load it.

```
<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.

#### 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.

#### rotate(rad)

rotates around center by rad.

#### 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`

.

#### name()

returns 'Graph'.

### Group

Group contains UnitaryObjects.

#### constructor

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

#### name()

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.

#### name()

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.

#### name()

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.

#### 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.

#### rotate(rad, center)

rotates around center by rad.

#### 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.

#### name()

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.

#### rotate(rad, center)

rotates around center by rad.

#### has(P)

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

#### name()

returns 'Polygon'.

### Quadrilateral

#### 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.

#### rotate(rad, center)

rotates around center by rad.

#### 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.

#### rotate(rad, center)

rotates around center by rad.

#### name()

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.

#### name()

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.

#### rotate(rad, center)

rotates around center by rad.

#### 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.

#### add(V)

adds V to this 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.

#### name()

return 'Vector'.