canvas-based-core 1.0.0

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/workflows/npm-publish-github-packages.yml

@@ -0,0 +1,36 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm test
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://npm.pkg.github.com/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

package/README.md

@@ -0,0 +1,2 @@
+# canvas-based-core
+canvas-based-core

package/canvas/canvas-module.js

@@ -0,0 +1,25 @@
+import { 
+    CanvasCollisionDetection, 
+    CanvasCollisionDetection2D 
+} from "./collisionDetection/canvas-collisionDetection-module.js";
+
+import {
+    CanvasArc2D,
+    CanvasCircle2D,
+    CanvasLine2D,
+    CanvasRect2D
+} from "./model/canvas-model-module.js";
+
+import { 
+    StyleType 
+} from "./styleType.js";
+
+export {
+    CanvasCollisionDetection,
+    CanvasCollisionDetection2D,
+    StyleType,
+    CanvasArc2D,
+    CanvasCircle2D,
+    CanvasLine2D,
+    CanvasRect2D
+}

package/canvas/collisionDetection/canvas-collisionDetection-module.js

@@ -0,0 +1,7 @@
+import { CanvasCollisionDetection } from "./canvasCollisionDetection.js";
+import { CanvasCollisionDetection2D } from "./canvasCollisionDetection2D.js";
+
+export {
+    CanvasCollisionDetection,
+    CanvasCollisionDetection2D
+}

package/canvas/collisionDetection/canvasCollisionDetection.js

@@ -0,0 +1,32 @@
+export class CanvasCollisionDetection {
+
+    constructor(){}
+
+    static leftCollisionDetected(x, ctx){
+        return x <= 0;
+    }
+
+    static rightCollisionDetected(x, ctx){
+        return x >= ctx.canvas.width;
+    }
+
+    static horizontalCollisionDetected(x, ctx){
+        return this.leftCollisionDetected(x, ctx) || this.rightCollisionDetected(x, ctx);
+    }
+
+    static topCollisionDetected(y, ctx){
+        return y <= 0;
+    }
+
+    static bottomCollisionDetected(y, ctx){
+        return y >= ctx.canvas.height;
+    }
+
+    static verticalCollisionDetected(y, ctx){
+        return this.topCollisionDetected(y, ctx) || this.bottomCollisionDetected(y, ctx);
+    }
+    
+    static collisionDetected(x, y, ctx){
+        return this.horizontalCollisionDetected(x, ctx) || this.verticalCollisionDetected(y, ctx);
+    }
+}

package/canvas/collisionDetection/canvasCollisionDetection2D.js

@@ -0,0 +1,40 @@
+import { CanvasCollisionDetection } from "./canvasCollisionDetection.js";
+
+export class CanvasCollisionDetection2D extends CanvasCollisionDetection {
+
+    constructor(){
+        super();
+    }
+
+    static leftCollisionDetected(source, ctx){
+        const x = (source.x + source.currentXVelocity) + 0.1;
+        return super.leftCollisionDetected(x, ctx);
+    }
+
+    static rightCollisionDetected(source, ctx){
+        const x = ((source.x + source.width) + source.currentXVelocity) - 1;
+        return super.rightCollisionDetected(x, ctx);
+    }
+
+    static horizontalCollisionDetected(source, ctx){
+        return this.leftCollisionDetected(source, ctx) || this.rightCollisionDetected(source, ctx);
+    }
+
+    static topCollisionDetected(source, ctx){
+        const y = (source.y + source.currentYVelocity) + 0.1;
+        return super.topCollisionDetected(y, ctx);
+    }
+
+    static bottomCollisionDetected(source, ctx){
+        const y = ((source.y + source.height) + source.currentYVelocity) - 1;
+        return super.bottomCollisionDetected(y, ctx);
+    }
+
+    static verticalCollisionDetected(source, ctx){
+        return this.topCollisionDetected(source, ctx) || this.bottomCollisionDetected(source, ctx);
+    }
+    
+    static collisionDetected(source, ctx){
+        return this.horizontalCollisionDetected(source, ctx) || this.verticalCollisionDetected(source, ctx);
+    }
+}

package/canvas/model/canvas-model-module.js

@@ -0,0 +1,11 @@
+import { CanvasArc2D } from "./canvasArc2D.js";
+import { CanvasCircle2D } from "./canvasCircle2D.js";
+import { CanvasLine2D } from "./canvasLine2D.js";
+import { CanvasRect2D } from "./canvasRect2D.js";
+
+export {
+    CanvasArc2D,
+    CanvasCircle2D,
+    CanvasLine2D,
+    CanvasRect2D
+}

package/canvas/model/canvasArc2D.js

@@ -0,0 +1,59 @@
+import { Arc2D } from "../../model/arc2D.js";
+import { StyleType } from "../styleType.js";
+
+export class CanvasArc2D extends Arc2D {
+
+    //props
+    ctx;
+    styleType;
+    style;
+
+    constructor(ctx, x, y, radius = 0, startAngle = 0, endAngle = 0, styleType = StyleType.FILL, style = "#000000", xVelocity = 0.00, yVelocity = 0.00) {
+        super(x, y, height, width, xVelocity, yVelocity);
+        this.ctx = ctx;
+        this.styleType = styleType;
+        this.style = style;
+    }
+
+    setCTX(val){
+        this.ctx = val;
+        return this;
+    }
+
+    setStyleType(val){
+        this.styleType = val;
+        return this;
+    }
+
+    setStyle(val){
+        this.style = val;
+        return this;
+    }
+
+    draw(){
+        this.#resolveDraw();
+    }
+
+    #resolveDraw(){
+        switch(this.styleType){
+            case StyleType.FILL:
+                this.ctx.fillStyle = this.style;
+                this.ctx.beginPath();
+                this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
+                this.ctx.fill();
+                break;
+            case StyleType.STROKE:
+                this.ctx.strokeStyle = this.style;
+                this.ctx.beginPath();
+                this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
+                this.ctx.stroke();
+        }
+    }
+
+    clear(){
+        const x = (this.x - this.radius);
+        const y = (this.y - this.radius);
+        const diameter = (this.radius * 2);
+        this.ctx.clearRect(x, y, diameter, diameter);
+    }
+}

package/canvas/model/canvasCircle2D.js

@@ -0,0 +1,59 @@
+import { Circle2D } from "../../model/circle2D.js";
+import { StyleType } from "../styleType.js";
+
+export class CanvasCircle2D extends Circle2D {
+
+    //props
+    ctx;
+    styleType;
+    style;
+
+    constructor(ctx, x, y, radius = 0, styleType = StyleType.FILL, style = "#000000", xVelocity = 0.00, yVelocity = 0.00) {
+        super(x, y, radius, xVelocity, yVelocity);
+        this.ctx = ctx;
+        this.styleType = styleType;
+        this.style = style;
+    }
+
+    setCTX(val){
+        this.ctx = val;
+        return this;
+    }
+
+    setStyleType(val){
+        this.styleType = val;
+        return this;
+    }
+
+    setStyle(val){
+        this.style = val;
+        return this;
+    }
+
+    draw(){
+        this.#resolveDraw();
+    }
+
+    #resolveDraw(){
+        switch(this.styleType){
+            case StyleType.FILL:
+                this.ctx.fillStyle = this.style;
+                this.ctx.beginPath();
+                this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
+                this.ctx.fill();
+                break;
+            case StyleType.STROKE:
+                this.ctx.strokeStyle = this.style;
+                this.ctx.beginPath();
+                this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
+                this.ctx.stroke();
+        }
+    }
+
+    clear(){
+        const x = (this.x - this.radius);
+        const y = (this.y - this.radius);
+        const diameter = (this.radius * 2);
+        this.ctx.clearRect(x, y, diameter, diameter);
+    }
+}

package/canvas/model/canvasLine2D.js

@@ -0,0 +1,26 @@
+import { Line2D } from "../../model/line2D.js";
+
+export class CanvasLine2D extends Line2D {
+
+    ctx;
+    style;
+
+    constructor(ctx, originX, originY, targetX, targetY, style = "#000000"){
+        super(originX, originY, targetX, targetY);
+        this.ctx = ctx;
+        this.style = style;
+    }
+
+    setCTX(val){
+        this.ctx = val;
+        return this;
+    }
+
+    draw(){
+        this.ctx.strokeStyle = this.style;
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.originX, this.originY);
+        this.ctx.lineTo(this.targetX, this.targetY);
+        this.ctx.stroke();
+    }
+}

package/canvas/model/canvasRect2D.js

@@ -0,0 +1,64 @@
+import { Rect2D } from "../../model/rect2D.js";
+import { StyleType } from "../styleType.js";
+
+export class CanvasRect2D extends Rect2D {
+
+    //props
+    ctx;
+    styleType;
+    style;
+
+    constructor(ctx, x, y, height, width, styleType = StyleType.FILL, style = "#000000", xVelocity = 0.00, yVelocity = 0.00) {
+        super(x, y, height, width, xVelocity, yVelocity);
+        this.ctx = ctx;
+        this.styleType = styleType;
+        this.style = style;
+    }
+
+    setCTX(val){
+        this.ctx = val;
+        return this;
+    }
+
+    setStyleType(val){
+        this.styleType = val;
+        return this;
+    }
+
+    setStyle(val){
+        this.style = val;
+        return this;
+    }
+
+    draw(){
+        this.#resolveDraw();
+    }
+
+    #resolveDraw(){
+        switch(this.styleType){
+            case StyleType.FILL:
+                this.ctx.fillStyle = this.style;
+                this.ctx.fillRect(this.x, this.y, this.width, this.height);
+                break;
+            case StyleType.STROKE:
+                this.ctx.strokeStyle = this.style;
+                this.ctx.strokeRect(this.x, this.y, this.width, this.height);
+        }
+    }
+
+    clear(){
+        this.ctx.clearRect(this.x, this.y, this.width, this.height);
+    }
+
+    rotate(degree){
+        this.ctx.save();
+        this.degree = (this.degree + degree) % 360;
+        const rad = this.degree * (Math.PI / 180);
+        this.ctx.translate(this.x, this.y);
+        this.ctx.rotate(rad);
+        this.ctx.fillRect((-this.width / 2), (-this.height / 2), this.width, this.height);
+        this.ctx.resetTransform();
+        this.ctx.restore();
+    }
+
+}

package/canvas/styleType.js

@@ -0,0 +1,4 @@
+export const StyleType = {
+    FILL: "FILL",
+    STROKE: "STROKE"
+};

package/collisionDetection/collisionDetection-module.js

@@ -0,0 +1,7 @@
+import { CollisionDetection } from "./collisionDetection.js";
+import { CollisionDetection2D } from "./collisionDetection2D.js";
+
+export {
+    CollisionDetection,
+    CollisionDetection2D
+}

package/collisionDetection/collisionDetection.js

@@ -0,0 +1,12 @@
+export class CollisionDetection {
+
+    constructor(){}
+
+    static xAxisCollisionDetected(sourceX, targetX){
+        return sourceX === targetX;
+    }
+
+    static yAxisCollisionDetected(sourceY, targetY){
+        return sourceY === targetY;
+    }
+}

package/collisionDetection/collisionDetection2D.js

@@ -0,0 +1,118 @@
+import { CollisionDetection } from "./collisionDetection.js";
+import { Point2D } from "../geometry/point2D.js";
+
+export class CollisionDetection2D extends CollisionDetection {
+
+    constructor(){
+        super();
+    }
+
+    static leftCollisionDetected(source, target){
+        return ((source.x) <= (target.x + target.width)) && 
+               ((source.x + source.width) >= (target.x + target.width)) &&
+               this.isWithinYRange(source, target);
+    }
+
+    static rightCollisionDetected(source, target){
+        return ((source.x + source.width) >= target.x) &&
+               ((source.x) <= (target.x)) &&
+               this.isWithinYRange(source, target); 
+    }
+
+    static horizontalCollisionDetected(source, target){
+        return this.leftCollisionDetected(source, target) || this.rightCollisionDetected(source, target);
+    }
+
+    static getLeftCollisionDetected(source, target){
+        if(this.leftCollisionDetected(source, target)){
+            return {
+                source: new Point2D(source.x, source.y),
+                target: new Point2D(target.x, target.y)
+            }
+        }
+    }
+
+    static getRightCollisionDetected(source, target){
+        if(this.rightCollisionDetected(source, target)){
+            return {
+                source: new Point2D(source.x, source.y),
+                target: new Point2D(target.x, target.y)
+            }
+        }
+    }
+
+    static getHorizontalCollisionDetected(source, target){
+        if(this.horizontalCollisionDetected(source, target)){
+            return {
+                source: new Point2D(source.x, source.y),
+                target: new Point2D(target.x, target.y)
+            }
+        }
+    }
+
+    static topCollisionDetected(source, target){
+        return ((source.y) <= (target.y + target.height)) &&
+               ((source.y + source.height) >= (target.y + target.height)) &&
+               this.isWithinXRange(source, target);
+    }
+
+    static bottomCollisionDetected(source, target){
+        return ((source.y + source.height) >= target.y) &&
+               ((source.y) <= (target.y)) &&
+               this.isWithinXRange(source, target);
+    }
+
+    static verticalCollisionDetected(source, target){
+        return this.topCollisionDetected(source, target) || this.bottomCollisionDetected(source, target);
+    }
+
+    static getTopCollisionDetected(source, target){
+        if(this.topCollisionDetected(source, target)){
+            return {
+                source: new Point2D(source.x, source.y),
+                target: new Point2D(target.x, target.y)
+            }
+        }
+    }
+
+    static getBottomCollisionDetected(source, target){
+        if(this.bottomCollisionDetected(source, target)){
+            return {
+                source: new Point2D(source.x, source.y),
+                target: new Point2D(target.x, target.y)
+            }
+        }
+    }
+
+    static getVerticalCollisionDetected(source, target){
+        if(this.verticalCollisionDetected(source, target)){
+            return {
+                source: new Point2D(source.x, source.y),
+                target: new Point2D(target.x, target.y)
+            }
+        }
+    }
+
+    static collisionDetected(source, target){
+        return this.horizontalCollisionDetected(source, target) || this.verticalCollisionDetected(source, target);
+    }
+
+    static getCollisionDetected(source, target){
+        if(this.collisionDetected(source, target)){
+            return {
+                source: new Point2D(source.x, source.y),
+                target: new Point2D(target.x, target.y)
+            }
+        }
+    }
+
+    static isWithinXRange(source, target){
+        return (((source.x + source.width) >= target.x) && (source.x <= target.x)) || 
+               ((source.x <= (target.x + target.width)) && (source.x >= target.x)); 
+    }
+
+    static isWithinYRange(source, target){
+        return (((source.y + source.height) >= target.y) && (source.y <= target.y)) || 
+               ((source.y <= (target.y + target.height)) && (source.y >= target.y));
+    }
+}

package/control/control-module.js

@@ -0,0 +1,7 @@
+import { KeyCode } from "./keyCode.js";
+import { KeyboardControlMapBase } from "./keyboardControlMapBase.js";
+
+export {
+    KeyCode,
+    KeyboardControlMapBase
+}

package/control/keyCode.js

@@ -0,0 +1,55 @@
+export const KeyCode = {
+    ArrowUp: "ArrowUp" ,
+    ArrowDown: "ArrowDown",
+    ArrowLeft: "ArrowLeft" ,
+    ArrowRight: "ArrowRight" ,
+    Space: "Space",
+    KeyQ: "KeyQ",
+    KeyW: "KeyW",
+    KeyE: "KeyE",
+    KeyR: "KeyR",
+    KeyT: "KeyT",
+    KeyY: "KeyY",
+    KeyU: "KeyU",
+    KeyI: "KeyI",
+    KeyO: "KeyO",
+    KeyP: "KeyP",
+    KeyA: "KeyA",
+    KeyS: "KeyS",
+    KeyD: "KeyD",
+    KeyF: "KeyF",
+    KeyG: "KeyG",
+    KeyH: "KeyH",
+    KeyJ: "KeyJ",
+    KeyK: "KeyK",
+    KeyL: "KeyL",
+    KeyZ: "KeyZ",
+    KeyX: "KeyX",
+    KeyC: "KeyC",
+    KeyV: "KeyV",
+    KeyB: "KeyB",
+    KeyN: "KeyN",
+    KeyM: "KeyM",
+    Digit1: "Digit1",
+    Digit2: "Digit2",
+    Digit3: "Digit3",
+    Digit4: "Digit4",
+    Digit5: "Digit5",
+    Digit6: "Digit6",
+    Digit7: "Digit7",
+    Digit8: "Digit8",
+    Digit9: "Digit9",
+    Digit0: "Digit0",
+    Numpad1: "Numpad1",
+    Numpad2: "Numpad2",
+    Numpad3: "Numpad3",
+    Numpad4: "Numpad4",
+    Numpad5: "Numpad5",
+    Numpad6: "Numpad6",
+    Numpad7: "Numpad7",
+    Numpad8: "Numpad8",
+    Numpad9: "Numpad9",
+    Numpad0: "Numpad0",
+    ShiftLeft: "ShiftLeft",
+    ShiftRight: "ShiftRight"
+}

package/control/keyboardControlMapBase.js

@@ -0,0 +1,15 @@
+export class KeyboardControlMapBase {
+
+    up;
+    down;
+    left;
+    right;
+
+    constructor(up, down, left, right){
+        this.up = up;
+        this.down = down;
+        this.left = left;
+        this.right = right;
+    }
+
+}

package/geometry/geometry-module.js

@@ -0,0 +1,7 @@
+import { Point2D } from "./point2D.js";
+import { Point3D } from "./point3D.js";
+
+export {
+    Point2D,
+    Point3D
+}

package/geometry/point2D.js

@@ -0,0 +1,20 @@
+export class Point2D {
+
+    x;
+    y;
+
+    constructor(x, y){
+        this.x = x;
+        this.y = y;
+    }
+
+    setX(val){
+        this.x = val;
+        return this;
+    }
+
+    setY(val){
+        this.y = val;
+        return this;
+    }
+}

package/geometry/point3D.js

@@ -0,0 +1,17 @@
+import { Point2D } from "./point2D.js";
+
+export class Point3D extends Point2D {
+
+    z;
+
+    constructor(x, y){
+        super(x, y);
+        this.z = z;
+    }
+
+    setZ(val){
+        this.z = val;
+        return this;
+    }
+
+}

package/model/arc2D.js

@@ -0,0 +1,33 @@
+import { ObjectBase2D } from "./ObjectBase2D.js";
+
+export class Arc2D extends ObjectBase2D {
+
+    //props
+    //type int
+    radius = 0;
+    startAngle = 0;
+    endAngle = 0;
+
+    constructor(x, y, radius = 0, startAngle = 0, endAngle = 0, xVelocity = 0.00, yVelocity = 0.00) {
+        super(x, y, xVelocity, yVelocity);
+        this.radius = radius;
+        this.startAngle = startAngle;
+        this.endAngle = endAngle;
+    }
+
+    setRadius(val){
+        this.radius = val;
+        return this;
+    }
+
+    setStartAngle(val){
+        this.startAngle = val;
+        return this;
+    }
+
+    setEndAngle(val){
+        this.endAngle = val;
+        return this;
+    }
+
+}

package/model/circle2D.js

@@ -0,0 +1,9 @@
+import { Arc2D } from "./arc2D.js";
+
+export class Circle2D extends Arc2D {
+
+    constructor(x, y, radius = 0, xVelocity = 0.00, yVelocity = 0.00) {
+        super(x, y, radius, 0, (Math.PI * 2), xVelocity, yVelocity);
+    }
+
+}

package/model/line2D.js

@@ -0,0 +1,34 @@
+export class Line2D {
+
+    originX;
+    originX;
+    targetX;
+    targetY;
+
+    constructor(originX, originY, targetX, targetY){
+        this.originX = originX;
+        this.originY = originY;
+        this.targetX = targetX;
+        this.targetY = targetY;
+    }
+
+    setOriginX(val){
+        this.originX = val;
+        return this;
+    }
+
+    setOriginY(val){
+        this.originY = val;
+        return this;
+    }
+
+    setTargetX(val){
+        this.targetX = val;
+        return this;
+    }
+
+    setTargetY(val){
+        this.targetY = val;
+        return this;
+    }
+}

package/model/model-module.js

@@ -0,0 +1,15 @@
+import { Arc2D } from "./arc2D.js";
+import { Circle2D } from "./circle2D.js";
+import { Line2D } from "./line2D.js";
+import { Rect2D } from "./rect2D.js";
+import { ObjectBase2D } from "./ObjectBase2D.js";
+import { ObjectBase3D } from "./ObjectBase3D.js";
+
+export {
+    ObjectBase2D,
+    ObjectBase3D,
+    Arc2D,
+    Circle2D,
+    Line2D,
+    Rect2D
+}    

package/model/objectBase2D.js

@@ -0,0 +1,48 @@
+export class ObjectBase2D {
+
+    //props
+    //type int
+    x;
+    y;
+    //type float
+    xVelocity;
+    yVelocity;
+
+    //ctor
+    constructor(x, y, xVelocity = 0.00, yVelocity = 0.00) {
+        this.x = x;
+        this.y = y;
+        this.xVelocity = xVelocity;
+        this.yVelocity = yVelocity;
+    }
+
+    //prop methods
+    setX(val){
+        this.x = val;
+        return this;
+    }
+
+    setY(val){
+        this.y = val;
+        return this;
+    }
+
+    setXVelocity(val){
+        this.xVelocity = val;
+        return this;
+    }
+
+    setYVelocity(val){
+        this.yVelocity = val;
+        return this;
+    }
+    //
+
+    moveXByXVelocity(){
+        this.x += this.xVelocity;
+    }
+
+    moveYByYVelocity(){
+        this.y += this.yVelocity;
+    }
+}

package/model/objectBase3D.js

@@ -0,0 +1,31 @@
+import { ObjectBase2D } from "./ObjectBase2D.js";
+
+export class ObjectBase3D extends ObjectBase2D {
+
+    //props
+    //type int
+    z;
+    //type float
+    zVelocity;
+
+    constructor(x, y, z, xVelocity = 0.00, yVelocity = 0.00, zVelocity = 0.00) {
+        super(x, y, xVelocity, yVelocity);
+        this.z = z;
+        this.zVelocity = zVelocity;
+    }
+
+    setZ(val){
+        this.z = val;
+        return this;
+    }
+
+    setZVelocity(val){
+        this.zVelocity = val;
+        return this;
+    }
+
+    moveZByZVelocity(){
+        this.z += this.zVelocity; 
+    }
+
+}

package/model/rect2D.js

@@ -0,0 +1,62 @@
+import { ObjectBase2D } from "./ObjectBase2D.js";
+
+export class Rect2D extends ObjectBase2D {
+
+    //props
+    //type int
+    height;
+    width;
+
+    constructor(x, y, height, width, xVelocity = 0.00, yVelocity = 0.00) {
+        super(x, y, xVelocity, yVelocity);
+        this.height = height;
+        this.width = width;
+    }
+
+    setHeight(val){
+        this.height = val;
+        return this;
+    }
+
+    setWidth(val){
+        this.width = val;
+        return this;
+    }
+
+    getTopLeftCoord(){
+        const x = this.x;
+        const y = this.y;
+        return new Point2D(x, y);
+    }
+
+    getTopRightCoord(){
+        const x = (this.x + this.width);
+        const y = this.y;
+        return new Point2D(x, y);
+    }
+
+    getBottomRightCoord(){
+        const x = (this.x + this.width);
+        const y = (this.y + this.height);
+        return new Point2D(x, y);
+    }
+
+    getBottomLeftCoord(){
+        const x = this.x;
+        const y = (this.y + this.height);
+        return new Point2D(x, y);
+    }
+
+    getCenterCoord(){
+        const x = ((this.x + this.width) / 2);
+        const y = ((this.y + this.height) / 2);
+        return new Point2D(x, y);
+    }
+
+    getCoordinates(){
+        //clockwise from origin x, y ie topleft
+        //[topleft, topright, bottomright, bottomleft, center]
+        return [this.getTopLeftCoord(), this.getTopRightCoord(), this.getBottomRightCoord(), this.getBottomLeftCoord(), this.getCenterCoord()];
+    }
+
+}

package/module.js

@@ -0,0 +1,57 @@
+
+import { 
+    KeyCode,
+    KeyboardControlMapBase
+} from "./control/control-module.js";
+
+import { 
+    Point2D, 
+    Point3D 
+} from "./geometry/geometry-module.js";
+
+import { 
+    CollisionDetection, 
+    CollisionDetection2D 
+} from "./collisionDetection/collisionDetection-module.js";
+
+import { 
+    ObjectBase2D,
+    ObjectBase3D,
+    Arc2D,
+    Circle2D,
+    Line2D,
+    Rect2D 
+} from "./model/model-module.js";
+
+import { 
+    StyleType,
+    CanvasCollisionDetection, 
+    CanvasCollisionDetection2D,
+    CanvasArc2D,
+    CanvasCircle2D,
+    CanvasLine2D,
+    CanvasRect2D 
+} from "./canvas/canvas-module.js";
+
+
+export {
+    KeyCode,
+    KeyboardControlMapBase,
+    Point2D,
+    Point3D,
+    CollisionDetection,
+    CollisionDetection2D,
+    StyleType,
+    ObjectBase2D,
+    ObjectBase3D,
+    Arc2D,
+    Circle2D,
+    Line2D,
+    Rect2D,
+    CanvasCollisionDetection,
+    CanvasCollisionDetection2D,
+    CanvasArc2D,
+    CanvasCircle2D,
+    CanvasLine2D,
+    CanvasRect2D
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "canvas-based-core",
+  "version": "1.0.0",
+  "description": "canvas-based-core",
+  "homepage": "https://github.com/pr1v4te4cc0unt/canvas-based-core#readme",
+  "bugs": {
+    "url": "https://github.com/pr1v4te4cc0unt/canvas-based-core/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pr1v4te4cc0unt/canvas-based-core.git"
+  },
+  "license": "ISC",
+  "author": "pr1v4te4cc0unt",
+  "type": "commonjs",
+  "main": "module.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/test.css

@@ -0,0 +1,29 @@
+header{
+    height: 25px;
+    width: 800px;
+    margin: auto;
+}
+
+main{
+    height: 500px;
+    width: 800px;
+    margin: auto;
+    font-family: sans-serif;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    text-align: center;
+}
+
+footer{
+    height: 25px;
+    width: 800px;
+    margin: auto;
+}
+
+canvas{
+    height: 400px;
+    width: 800px;
+    margin: auto;
+    border: 5px solid black;
+}

package/test.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./test.css">
+    <script src="./test.js" type="module" defer></script>
+    <title>Document</title>
+</head>
+<body>
+
+    <header></header>
+
+    <main>
+        <canvas>
+
+        </canvas>
+    </main>
+
+    <footer></footer>
+</body>
+</html>

package/test.js

@@ -0,0 +1,27 @@
+import * as Core from "./moduleExport.js";
+
+var canvas = document.querySelector("canvas");
+var ctx = canvas.getContext("2d");
+
+var circle = new Core.CanvasCircle2D(ctx, 50, 50, 10);
+console.log(circle);
+
+setInterval(() => circle.draw(), 1000);
+setInterval(() => circle.clear(), 2000);
+
+var rectOne = new Core.CanvasRect2D(ctx, 100, 50, 10, 10).setStyle("black");
+rectOne.draw();
+// console.log(rectOne);
+
+var rectTwo = new Core.CanvasRect2D(ctx, 120, 50, 10, 10).setStyle("green");
+rectTwo.draw();
+// console.log(rectTwo);
+
+var rectThree = new Core.CanvasRect2D(ctx, 140, 50, 10, 10).setStyle("blue");
+rectThree.draw();
+
+rectOne.draw();
+rectTwo.draw();
+rectThree.draw();
+// console.log(rectOne);
+