Arcanv

Arcanv is a lightweight JavaScript library for canvas focused software development.
This library is under development.

Download

npm install arcanv

Quickstart

Starting the Surface

Surface is a collection of layers where all your elements will be drawn.

import {Surface} from "arcanv";

let surface = new Surface("canvas");

The code above will initialize your Surface in an object with id "canvas".
If no layers are defined, it will auto create a "main" layer.

Drawing a Rectangle

import {Surface, FillRectangle} from "arcanv";

let surface = new Surface("canvas");

let rect = new FillRectangle(0, 0, 100, 100);

surface.add(rect);
surface.update()

The class FillRectangle will draw a rectangle by using "ctx.fillRect(0, 0, 100, 100)".
The add function in will add the element into the Surface "main" layer.
The update function will call all the canvas draw functions.

Transforming

Every element has a transform attribute that holds the position and rotation.

import {Surface, FillRectangle} from "arcanv";

let surface = new Surface("canvas");

let rect = new FillRectangle(0, 0, 100, 100);

surface.add(rect);

rect.tranform.x = 50;
rect.transform.rotation = 45;

surface.update()

The code above will draw the rectangle at position (50, 0) with a rotation of 45 degrees.

Elements

The Surface expects that everything added to it will extends the Elements class.
Some default Elements are provided by the library like:

• FillRectangle
• Rectangle
• ImageField
• TextField

However, you can create your own elements by extending the Element class.

import {Surface, Element} from "arcanv";

class RedRectangle extends Element{
    constructor(x, y, width, height){
        this.transform.x = x;
        this.transform.y = y;
        this.width = width;
        this.height = height;
    }

    onStart(){
        console.log("Hey there, i'm a red rectangle")
    }

    onDraw(){
        this.setColor("red");
        this.fillRect(0, 0, this.width, this.height);
    }
}

let surface = new Surface("canvas");

let rect = new RedRectangle(10, 10, 100, 100);

surface.add(rect);

surface.update()

The onStart function will be called once when the object is added to a surface.

The onDraw function will be called each time the surface is updated.
Before the onDraw function is called, the Surface will perform transformations related to the object's x, y and rotation. So, in the RedRectangle onDraw function, the fillRect will actually draw an rectangle at position (10, 10), the transformed position.

By default, when the onDraw function ends, the canvas styling and transformations will return to default.