Update

1- Fix some problim

Resorce

  • deno
  • npm
  • github

    Install

    deno

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

Values

Key Type
createCircle method
createText method
createImage method
createLine method
createRect method
createRhombus method
createStar method
createTriangle 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 
import { addFontFamily } from "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