Update 0.0.1

1- Can use commonJS modules and ES Modules

Resorce

Compiling for node js only

If you want to know the details, go here

OS Command
OS X Using Homebrew:
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
Ubuntu sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
Fedora sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel
Solaris pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto
OpenBSD doas pkg_add cairo pango png jpeg giflib
Windows See the wiki
Others See the wiki

Install

npm

npm install shapes-plus --save
// index.js
const { Shapes } = require("shapes-plus");
const shapes = new Shapes(/* options: ShapesOptions */);

or

// index.js
import { Shapes } from "shapes-plus";
const shapes = new Shapes(/* options: ShapesOptions */);

deno

// mod.ts
import { Shapes } from "https://deno.land/x/shapes_plus@v0.0.1/mod.ts";
const shapes = new Shapes(/* options: ShapesOptions */);
$ deno run -A --unstable mod.ts

Values

Key Type
createCircle method
createText method
createImages method
createLine method
createRect method
createRhombus method
createStar method
createTriangle method
setCanvasSize method
toBuffer method
toSave method
addFontFamily method
Canvas prototype
canvas prototype
ctx prototype

Rect

const rect = shapes.createRect(/* options: RectOptions */);
rect.draw({x:200, y:100, color:"blue", drawType:"stroke"})
rect.draw({x:500, y:100, height:110, width:110});

Rect

Circle

const circle = shapes.createCircle(/* options: CircleOptions */);
circle.draw({x:200, y:100, color:"blue", drawType:"stroke"});
circle.draw({x:500, y:100, radius:60});

Circle

Text

const text = shapes.createText(/* options: TextOptions */);
text.draw({x:200, y:100, color:"blue", drawType:"stroke", text:"Hello"});
text.draw({x:500, y:100, text:"Hi", fontFamily:"Impact", size:60, textAlign:"left", width:70});

Text

Line

const line = shapes.createLine(/* options: LineOptions */);
line.draw({x:200, y:100, endX:450, endY:100, color:"blue", lineWidth:3});
line.draw({x:200, y:150, endX:450, endY:150, lineWidth:5});

Line

Rhombus

const rhombus = shapes.createRhombus(/* options: RhombusOptions */);
rhombus.draw({x:200, y:200, color:"blue", drawType:"stroke"});
rhombus.draw({x:500, y:200, height:80 ,width:90});

Rhombus

Star

const star = shapes.createStar(/* options: StarOptions */);
star.draw({x:200, y:100, color:"blue", drawType:"stroke"});
star.draw({x:500, y:100, spikes:9, innerRadius:20, outerRadius:30});

Star

Image

const image = shapes.createImage(/* options: ImageOptions */);
image.draw({x:200, y:500, height:120, width:120, path:"https://cdn.discordapp.com/attachments/716228498825412690/987695097107873792/unknown.png"}).then(async img=>
    {
        await image.draw({x:400, y:500, isCircle:true, radius:60, path:"https://cdn.discordapp.com/attachments/716228498825412690/987695097107873792/unknown.png"});
        await img.draw({x:600, y:500, height:100, width:100, path:"https://cdn.discordapp.com/attachments/716228498825412690/987695097107873792/unknown.png"});
        await img.draw({x:800, y:500, isCircle:true, radius:50, path:"https://cdn.discordapp.com/attachments/716228498825412690/987695097107873792/unknown.png"});
    });

Image

Triangle

const triangle = shapes.createTriangle(/* options: TriangleOptions */);
triangle.draw({x:200, y:100, color:"red"});
triangle.draw({x:300, y:100, color:"blue", drawType:"stroke"});
triangle.draw({x:400, y:100, color:"green", rotate:70});
triangle.draw({x:200, y:200, color:"yellow", sideAB: 20, sideAC: 10});
triangle.draw({x:300, y:200, color:"pink", sideBC: 50, rotate:20});

Triangle

Font Family

Warning If you use windows os you must add font family in your windows before use addFontFamily

// Add new Font Family 
const { addFontFamily } = require("shapes-plus");
addFontFamily(/* path: string, setName: string) // You can add any name in setName

for examlpe:

addFontFamily("./Halimun.ttf","Halimun");

const text = shapes.createText();
text.draw({x:200, y:100, text:"Hello", fontFamily:"Halimun"});
text.draw({x:500, y:100, text:"Hello", fontFamily:"Impact"});

font family

Other method

// save Image
shapes.toSave(path); // path = "save local device without extension"

// convert to Buffer
shapes.toBuffer() // return Buffer

One example in detail

shapes.createRect(/*options*/).draw({x:500, y:100, color:"red"}).draw({x:700, y:100, color:"red"}).draw({x:900, y:100, color:"red"});

OR

shapes.createRect({y:100, color:"red"}).draw({x:500}).draw({x:700}).draw({x:900});

OR

const rect = shapes.createRect(/*options*/);
rect.draw({x:500, y:100, color:"red"});
rect.draw({x:700, y:100, color:"red"});
rect.draw({x:900, y:100, color:"red"});

OR

const rect = shapes.createRect({color:"red", y:100});
rect.draw({x:500});
rect.draw({x:700});
rect.draw({x:900});

draws

Options

ShapesOptions

Key Type Default
width? Number 1920
height? Number 1080
canvas? Canvas Canvas

RectOptions

Key Type Default
x Number 0
y Number 0
color String black
drawType draw String fill
width Number 100
height Number 100

CircleOptions

Key Type Default
x Number 0
y Number 0
color String black
drawType draw String fill
radius Number 50

TextOptions

Key Type Default
x Number 0
y Number 0
color String black
drawType draw String fill
width Number 100
text String null
size Number 50
fontFamily String Arial

LineOptions

Key Type Default
x Number 0
y Number 0
color String black
lineWidth Number 1
endX Number 50
endY Number 50

RhombusOptions

Key Type Default
x Number 0
y Number 0
color String black
drawType draw String fill
width Number 100
height Number 100
lineWidth Number 1

StarOptions

Key Type Default
x Number 0
y Number 0
color String black
drawType draw String fill
lineWidth Number 1
spikes Number 5
outerRadius Number 30
innerRadius Number 15

ImageOptions

Key Type Default
x Number 0
y Number 0
color String black
width Number 100
height Number 100
path String null

TriangleOptions

Key Type Default
x Number 0
y Number 0
color String black
drawType draw String fill
sideAB? number 0
sideAC? number 0
sideBC? number 0
rotate? number 0