Update 0.0.31- 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 npmnpm install shapes-plus --save
const { Shapes } = require ( "shapes-plus" ) ;
const shapes = new Shapes ( ) ; or
import { Shapes } from "shapes-plus" ;
const shapes = new Shapes ( ) ; deno
import { Shapes } from "https://deno.land/x/shapes_plus@v0.0.3/mod.ts" ;
const shapes = new Shapes ( ) ; $ 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
Rectconst rect = shapes. createRect ( ) ;
rect. draw ( { x : 200 , y : 100 , color : "blue" , drawType : "stroke" } )
rect. draw ( { x : 500 , y : 100 , height : 110 , width : 110 } ) ;
Circleconst circle = shapes. createCircle ( ) ;
circle. draw ( { x : 200 , y : 100 , color : "blue" , drawType : "stroke" } ) ;
circle. draw ( { x : 500 , y : 100 , radius : 60 } ) ;
Textconst text = shapes. createText ( ) ;
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 } ) ;
Lineconst line = shapes. createLine ( ) ;
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 } ) ;
Rhombusconst rhombus = shapes. createRhombus ( ) ;
rhombus. draw ( { x : 200 , y : 200 , color : "blue" , drawType : "stroke" } ) ;
rhombus. draw ( { x : 500 , y : 200 , height : 80 , width : 90 } ) ;
Starconst star = shapes. createStar ( ) ;
star. draw ( { x : 200 , y : 100 , color : "blue" , drawType : "stroke" } ) ;
star. draw ( { x : 500 , y : 100 , spikes : 9 , innerRadius : 20 , outerRadius : 30 } ) ;
Imageconst image = shapes. createImage ( ) ;
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" } ) ;
} ) ;
Triangleconst triangle = shapes. createTriangle ( ) ;
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 } ) ;
Font FamilyWarning
If you use windows os you must add font family in your windows before use addFontFamily
const { addFontFamily } = require ( "shapes-plus" ) ;
addFontFamily ( 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" } ) ;
Other method
shapes. toSave ( path) ;
shapes. toBuffer ( ) One example in detailshapes. createRect ( ) . 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 ( ) ;
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 } ) ;
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