\n\n\nNess-Canvas is a small canvas Builder for Canvas.\n\n## Inslallation\n\n```bash\n$ npm install ness-canvas\n```\n\nIf you are not used to canvas, the latter can request a specific installation that you will find here\n\n## Quick Example\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst { loadImage } = require('canvas')\n\nconst background = await loadImage('https://media.discordapp.net/attachments/1006600590408818810/1006600665298116728/background-3147808.jpg');\nconst avatar = await loadImage('https://media.discordapp.net/attachments/758031322244710601/1000153437813616650/perso_anime_U565bW7EhY2InkF.png');\nconst builder = new NessBuilder(700, 250);\n\nconst gradient = builder.context.createLinearGradient(25, 25, 185 , 185 );\nconst gradient2 = builder.context.createLinearGradient(25, 200, 660 , 130);\n\ngradient.addColorStop(0, 'red');\n...\ngradient2.addColorStop(0, 'red');\n...\n\nbuilder.setCornerRadius(15)\n .setBackground(background)\n .setAxis(\"BottomRight\")\n .setFrame(\"Square\", { x: 25, y: 25, size: 80 }, { type: \"Image\", content: avatar, color: gradient, lineWidth: 5 })\n .setFrame(\"Hexagon\", { x: 520, y: 25, size: 80, rotate: 90 }, { type: \"Text\", content: \"33\", color: \"Black\", textOptions: { size: 50 } })\n .setExp({ x: 40, y: 200, width: 620, height: 30, radius: 15 }, 50, { outlineColor1: gradient2, outlineColor2: \"HotPink\", color2: \"Plum\" })\n .setText('Hello World!', {x:250, y:100}, {size: 40, font: '*Impact'})\n .generatedTo('.', \"test\", \"png\");\n\n// Generate canvas in a specific file\nbuilder.generateTo('FileLocation', 'ImageName', \"PNG | JPEG | JPG\")\n\n// Recover the canvas buffer\nBuilder.getBuffer()\n\n// Add a filter to an image\n\nconst filter = new FilterBuilder(avatar);\nawait filter.Invert();\n \nnew NessBuilder(avatar.width, avatar.height)\n .setCornerRadius(15)\n .setBackground(filter.getCanvas())\n .generatedTo(\"src/test/\", \"testFilter\", \"png\");\n```\n## Result\n\n
\n
\n
NessBuilder
\n \n
\n
\n
FilterBuilder && NessBuilder
\n \n
\n
\n\n## Documentation\n\nThis project is an implementation of the Canvas module. For more on the latter visit the Canvas Module Guide. All utility methods are documented below.\n\nThe filter builder has documentation specifying all filters you find here.\n\n\n> ⚠️ Gif Builder has been move in a external package you can find here \n> ⚠️ You can also find an example of using the Gif Builder here\n\n\n
\n
\n
GifBuilder
\n \n
\n
\n\n## Builder\n\n* [NessBuilder()]()\n* ~~[RankupBuilder()]()~~\n* ~~[CustomProfile()]()~~\n---\n### Methods\n\n\n* context\n\n* setCornerRadius\n* setBackground\n* setAxis\n\n* setFont\n* setText\n\n* setImage\n\n* setFrame\n* setBanner (Not add to the doc yet)\n\n* setExp\n* setLoading (Doc need to be update)\n\n* toBuffer\n* generatedTo\n* toDataURL\n\n---\n### Types\n\n* CustomColor (Not add to the doc yet)\n* CanvasImage (Not add to the doc yet)\n* IntRange (Not add to the doc yet)\n* Text (Not add to the doc yet)\n\n---\n### NessBuilder()\n\n> ```ts\n> NessBuilder(width: number, height: number) => Builder\n> ```\n\nCreates a Canvas instance. This method works in Node.js.\n\nDescription \n\n* **width**: Specifies the width of the element in pixels\n* **height**: Specify the height of the element in pixels\n\n\nExample \n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n```\n\n\n### context\n\n> ```ts\n> context => CanvasRenderingContext2D\n> ```\n\nCanvas context.\n\nDescription\n\nGive access to Node Canvas context methods\n\n\nExample \n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n\nbuilder.context.beginPath()...\nbuilder.context.moveTo...\n...\nbuilder.context.clip...\nbuilder.context.closePath...\nbuilder.context.fill...\n```\n\n\n### setCornerRadius()\n\n> ```ts\n> setCornerRadius(radius: number, outline?: number, color?: CustomColor) => this\n> ```\n> Type definition [CustomColor](#CustomColor)\n\nRound the edges of the canvas\n\nDescription \n\n* **radius**: Rounded the edges of the canvas\n* **outline**: ouline size (default 3)\n* **color**: outline color (default white)\n\n\n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n\nbuilder.setCornerRadius(15)\n```\n
\n \n
\n\n\n\n### setBackground()\n\n> ```ts\n> setBackground(imageColor: CanvasImage | CustomColor): this;\n> ```\n> Type definition [CanvasImage](#CanvasImage) | [CustomColor](#CustomColor)\n\nReplaces the space of the canvas with an image, a plain color or a degrader\n\nDescription \n\n* **imageColor**: Define the type and background to use (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst { loadImage } = require('canvas')\n\nconst builder = new NessBuilder(400, 200)\nconst img = await loadImage(\"./assets/image/background/color-2174052.png\");\n\nconst patern = builder.context.createPattern(img, \"repeat\");\nconst linGradient = builder.context.createLinearGradient(0, 0, 400, 0);\nconst radGradient = builder.context.createRadialGradient(200, 100, 75, 200, 100, 200);\n\nlinGradient.addColorStop(...);\nradGradient.addColorStop(...);\n\nbuilder.setBackground(img);\nbuilder.setBackground(\"Coral\");\nbuilder.setBackground(\"#ff0000\");\nbuilder.setBackground(\"rgb(155, 135, 85)\");\nbuilder.setBackground(\"rgba(155, 135, 85, 0.5)\");\nbuilder.setBackground(linGradient);\nbuilder.setBackground(radGradient);\nbuilder.setBackground(patern); // Patern have a bug where he just zoom upper left corner so don't use it\n```\n\n
\n \n
\n\n\n### setAxis()\n\n> ```ts\n> setBackground(imageColor: CanvasImage | CustomColor): this;\n> ```\n> Type definition [CanvasImage](#CanvasImage) | [CustomColor](#CustomColor)\n\nReplaces the space of the canvas with an image, a plain color or a degrader\n\nDescription \n\n* **imageColor**: Define the type and background to use (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst { loadImage } = require('canvas')\n\nconst builder = new NessBuilder(400, 200)\nconst img = await loadImage(\"./assets/image/background/color-2174052.png\");\n\nconst patern = builder.context.createPattern(img, \"repeat\");\nconst linGradient = builder.context.createLinearGradient(0, 0, 400, 0);\nconst radGradient = builder.context.createRadialGradient(200, 100, 75, 200, 100, 200);\n\nlinGradient.addColorStop(...);\nradGradient.addColorStop(...);\n\nbuilder.setBackground(img);\nbuilder.setBackground(\"Coral\");\nbuilder.setBackground(\"#ff0000\");\nbuilder.setBackground(\"rgb(155, 135, 85)\");\nbuilder.setBackground(\"rgba(155, 135, 85, 0.5)\");\nbuilder.setBackground(linGradient);\nbuilder.setBackground(radGradient);\nbuilder.setBackground(patern); // Patern have a bug where he just zoom upper left corner so don't use it\n```\n\n
\n \n
\n\n\n### setFont()\n\n>```ts\n> setFont(name: string, size?: number): this\n>```\n\nChange Font used\n\nDescription\n\n* **name**: System font name\n* **size**: Font default size\n> Also works with `registerFont`, but it is still advisable to install the fonts directly in your operating system because registerFont does not work for everyone.\n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n\nbuilder.setFont(\"Sketch Gothic School\", 50)\n\n.setFrame(\"Square\", { location:{x: 350, y: 125}, size: 50, Quadrilateral: { radius: 0}, outline: { size: 2, color: \"Aquamarine\"} }, { type: \"Text\", content: \"Hellow world\", text: { color: \"Brown\"}})\n...\n.setFont(\"Arial\", 15)\n.setText(...)\n...\n```\n\n\n\n### setText()\n\n> ```ts\n> setText(text: string, coordinate: {x: number, y: number}, option?: Text) => this\n> ```\n> Type definition [Text](#Text)\n\nWrites text in the canvas\n\nDescription\n\n* **text**: Text to write\n* coordinate: Location to write text\n\n * **x**: location of text on axis x\n * **y**: location of text on axis y\n \n\n* option: Adjust text configuration\n\n * **size**: Text size\n * **`font?`**: Change font to use, add `*` for use font system (*Arial, *Calibri, ...)\n * **`color?`**: Text color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n * **`backgroundColor?`**: Background color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n * **`stroke?`**: Write text with no fill\n * **`textAlign?`**: Align the text on the vertical axis\n * **`textBaseline?`**: Align the text on the horizontal axis\n > The use of `*` for `font` is intended for future addition not yet implemented\n\n \n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n\nbuilder.setText(\"Hello World\", { x: 62, y: 150 }, { font: \"sans-serif\", size: 80, color: \"#000000\", textAlign: \"center\", textBaseline: \"middle\" })\n```\n\n\n\n### setImage()\n\n> ```ts\n> setImage(image: CanvasImage, imageOption: ImagelocationOption, locationOption?: DrawlocationOption): this;\n> ```\n> Type definition [CanvasImage](#CanvasImage)\n\nDraw an image or a Canvas to S coordinates with D dimensions\n\nDescription \n\n* **image**: Image after use `LoadImage` from Node-Canvas or a Canvas (Patern and Gradiant Not supported)\n\n* imageOption: Source image coordinates to draw in the context of Canvas\n\n * **sx**: Coordinate X in the destination canvas (upper left corner of the source image)\n * **sy**: Coordinate Y in the destination canvas (upper left corner of the source image)\n * **`sWidth?`**: Width of the image drawn in the Canvas\n * **`sHeight?`**: Height of the image drawn in the Canvas\n > `sWidth & sHeight` This allows you to adjust the size of the image. If this argument is not specified, the image will take its normal whidth or height\n \n\n* locationOption?: Modify image coordinates to draw in the context of Canvas\n\n * **dx**: Coordinate X from image source to draw in the canvas (upper left corner) \n * **dy**: Coordinate Y from image source to draw in the canvas (upper left corner)\n * **`dWidth?`**: Width of the image Modify (imageOption) to draw in the canvas\n * **`dHeight?`**: Height of the image Modify (imageOption) to draw in the canvas\n \n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst { loadImage } = require('canvas')\n\nconst builder = new NessBuilder(250, 300)\nconst image = await loadImage('./assets/image/background/color-2174052.png')\n\nbuilder.setImage(image, {sx: 25, sy: 25, sWidth: 100, sHeight: 75});\n\nbuilder.setImage(image, {sx: 25, sy: 25, sWidth: 100, sHeight: 75}, {dx: 0, dy: 25, dWidth: 200, dHeight: 150});\n```\n\n\n\n### setFrame()\n\n> ```ts\n> setFrame(shape: S, frame: Frame, content: Content): this;\n> ```\n\nDraw a frame containing an image, a text or a color\n\nDescription\n\n* **shape**: Shape of your frame (Square/Circle/...)\n* frame: Frame positioning in Canvas\n\n * location: Frame location in Canvas \n \n * **x**: Frame location on axis x\n * **y**: Frame location on axis y\n \n\n * **size**: Frame size\n * outline: Frame ouline parameter \n\n * **size**: Frame Outline Size\n * **color**: Frame Outline Color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n \n\n * **`rotate?`**: Frame Rotation\n * Quadrilateral?: Option for the square and the rectangle shape\n \n * **radius**: Corner Radius\n * **width**: Replace Size parameter for axis x\n * **height**: Replace Size parameter for axis y\n \n > `width & height` is used for the rectangle `shape`\n \n\n > `Quadrilateral` Additional parameter for the square and Rectangle of `shape`\n \n \n\n* content: Modify Frame property \n\n * **type**: Specifies the type of content to use\n * **content**: Frame content (Image | Gradiant | Patern | Text)\n * text?: Modify Text property (not used if type is not of type Text and content is not a text or a number) \n\n * **size**: Text size\n * **`color?`**: Text color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n * **`backgroundColor?`**: Background color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n * **`stroke?`**: Write text with no fill\n * **`textAlign?`**: Align the text on the vertical axis\n * **`textBaseline?`**: Align the text on the horizontal axis\n\n \n\n \n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst { loadImage } = require('canvas')\n\nconst builder = new NessBuilder(250, 300)\nconst image = await loadImage('./assets/image/background/color-2174052.png')\nconst linGradient = builder.context.createLinearGradient(0, 0, 240, 0);\n\nbuilder.setFrame(\"Pentagon\", { location: { x: 100, y: 100 }, size: 80 }, { type: \"Color\", content: \"Coral\", color: \"Blue\" })\n\nbuilder.setFrame(\"Square\", { location: { x: 10, y: 10 }, size: 50 }, { type: \"Empty\", content: \"Empty\", color: \"Blue\" })\n\nlinGradient.addColorStop(...)\n\nbuilder.setFrame(\"Square\", { location: { x: 220, y: 165 }, size: 50 }, { type: \"Text\", content: \"linGrad I am out context but not my color gradiant\", color: \"Blue\", text: { size: 20, color: linGradient, backgroundColor: \"White\" } })\n\n```\n\n
\n \n \n \n \n \n
\n \n\n\n\n\n\n### setExp()\n\n> ```ts\n> setExp(exp: Experience, progress: IntRange<0, 101>, color?: ExperienceColor) => this\n> ```\n> Type definition [IntRange](#IntRange)\n\nDraws a bar that can act as an experience bar\n\nDescription\n\n* exp: Experience bar positioning in Canvas\n\n * location: Experience bar location in Canvas \n \n * **x**: Experience bar location on axis x\n * **y**: Experience bar location on axis y\n \n * size: Experience bar location in Canvas \n \n * **Width**: Width of the Experience bar\n * **Height**: Height of the Experience bar\n \n * **`rotate?`**: Pivot the Experience bar to a certain degree\n * **`radius?`**: Round the edge\n \n* **progress**: Progress of filling from 0% to 100%\n\n* color?: Adjust Bar color\n\n * **backColor**: Color of the bar in the background\n * **color**: Filling bar color\n * **outlineColor**: Color of the contour of the bar in the background\n * **backOutlineColor**: Contour color of the filling bar\n * **`transparency?`**: Background transparency\n > Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern\n\n \n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n\nbuilder.setExp({ location: { x: 30, y: 30 }, size: { width: 400, height: 30 }, radius: 10, rotate: 90 }, 50)\n\nbuilder.setExp({ location: { x: 30, y: 30 }, size: { width: 400, height: 30 } }, 50, { backColor: \"Red\", backOutlineColor: \"Coral\" })\n\n```\n\n\n\n### setLoading()\n\n>```ts\n> setLoading(shape: Shape, option: LoadingOption): this\n>```\nDescription\n\n* **shape**: Frame shape (Square/Circle/Polygone...)\n\n\n* option: FrameLoading positioning in Canvas.\n\n * **x**: Frame location on axis x\n * **y**: Frame location on axis y\n * **size**: Frame size\n * **`rotate?`**: Frame Rotation\n\n * fill: Modify the filling parameters \n\n * **type**: Filling type (linear or hourly)\n * **start**: Only for hourly filling type (Default start to 12h)\n \n \n\n * **color**: Frame content Color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n * **progress**: Progress of filling from 0% to 100%\n * outline: Modify Outline parameters\n\n * **widht**: line size\n * **color**: line color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)\n \n\n * QuadrilateralOption?: Option for the square and the rectangle shape\n \n * **radius**: Corner Radius\n * **width**: Replace Size parameter for axis x\n * **height**: Replace Size parameter for axis y\n \n > `width & height` is used for the rectangle `shape`\n \n\n \n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n\nbuilder.setLoading(\"Decagon\", { x: 300, y: 300, size: 250, fill: { type: \"Line\" }, color: radGradient, outline: { color: \"Green\", width: 3 }, progress: 50, QuadrilateralOption: { width: 250, height: 100, radius: 0 } })\n```\n\n\n\n### toBuffer()\n\n> ```ts\n> toBuffer(ext?: ImageExtention | \"raw\" | \"pdf\") => Promise\n> ```\nReturns a Buffer of the image contained in the canvas (default png format)\nDescription\n\n* **ext**: Convert Buffer to image extension, pdf or raw format\n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n\nbuilder.toBuffer()\n```\n\n\n\n### generatedTo()\n\n> ```ts\n> generatedTo(location: string, name: string, type: ImageExtention) => Promise\n> ```\n\nGenerates an image of the canvas in a specific path\nDescription\n\n* **Location**: Generation path\n* **name**: File name\n* **type**: Image extension (png, jpg, jpeg, bmp, tif, tiff)\n\n\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n\nbuilder.generatedTo('src/myFolder/', \"name\", \"png\")\n```\n\n\n### toDataURL()\n\n> ```ts\n> toDataURL() => string\n> ```\n\nReturns canvas to base64 encoded string\n\nExample\n\n```js\nconst { NessBuilder } = require('ness-canvas')\nconst builder = new NessBuilder(250, 300)\n...\n\nbuilder.toDataURL()\n```\n\n\n\n____\n\n\n\n\n\n### CustomColor\n\n### CanvasImage\n### IntRange\n### Text","readmeFilename":"README.md"}
![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/test.png?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/FilterImage/Invert.png?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/test.gif?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/Radius.png?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/SetBackground.png?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/setFrameOptionColor.png?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/setFrameOptionText.png?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/setFrameOptionText2.png?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/setFrameShape.png?raw=true\")
\n ![](\"https://github.com/DARK-ECNELIS/Ness-Canvas/blob/main/Assets/setFrameCoordinate.png?raw=true\")
\n ![\"Discord\"](\"https://img.shields.io/discord/726208970489987152?style=plastic&logo=discord&label=Discord&color=%239400D3&link=https%3A%2F%2Fdiscord.gg%2FsjABtBmTWa\")
\n ![\"npm](\"https://badge.fury.io/js/ness-canvas.png\"){kind=icon}
\n ![\"npm](\"https://img.shields.io/npm/dt/ness-canvas.png\"){kind=small}
\n