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

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

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. moveTo() returns new Polygon instance which are moved.

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