Ness-Canvas 2.4.0

Join Discord >

Ness-Canvas is a small canvas Builder for Canvas.

Inslallation

$ npm install ness-canvas

If you are not used to canvas, the latter can request a specific installation that you will find here

Quick Example

const { NessBuilder } = require('ness-canvas')
const { loadImage } = require('canvas')

const background = await loadImage('https://media.discordapp.net/attachments/1006600590408818810/1006600665298116728/background-3147808.jpg');
const avatar = await loadImage('https://media.discordapp.net/attachments/758031322244710601/1000153437813616650/perso_anime_U565bW7EhY2InkF.png');
const builder = new NessBuilder(700, 250);

const gradient = builder.context.createLinearGradient(25, 25, 185 , 185  );
const gradient2 = builder.context.createLinearGradient(25, 200, 660 , 130);

gradient.addColorStop(0, 'red');
...
gradient2.addColorStop(0, 'red');
...

builder.setCornerRadius(15)
  .setBackground(background)
  .setAxis("BottomRight")
  .setFrame("Square", { x: 25, y: 25, size: 80 }, { type: "Image", content: avatar, color: gradient, lineWidth: 5 })
  .setFrame("Hexagon", { x: 520, y: 25, size: 80, rotate: 90 }, { type: "Text", content: "33", color: "Black", textOptions: { size: 50 } })
  .setExp({ x: 40, y: 200, width: 620, height: 30, radius: 15 }, 50, { outlineColor1: gradient2, outlineColor2: "HotPink", color2: "Plum" })
  .setText('Hello World!', {x:250, y:100}, {size: 40, font: '*Impact'})
  .generatedTo('.', "test", "png");

// Generate canvas in a specific file
builder.generateTo('FileLocation', 'ImageName', "PNG | JPEG | JPG")

// Recover the canvas buffer
Builder.getBuffer()

// Add a filter to an image

const filter = new FilterBuilder(avatar);
await filter.Invert();
  
new NessBuilder(avatar.width, avatar.height)
  .setCornerRadius(15)
  .setBackground(filter.getCanvas())
  .generatedTo("src/test/", "testFilter", "png");

Result

NessBuilder

FilterBuilder && NessBuilder

Documentation

This project is an implementation of the Canvas module. For more on the latter visit the Canvas Module Guide. All utility methods are documented below.

The filter builder has documentation specifying all filters you find here.

⚠️ Gif Builder has been move in a external package you can find here
⚠️ You can also find an example of using the Gif Builder here

GifBuilder

Builder

NessBuilder()

NessBuilder(width: number, height: number) => Builder

Creates a Canvas instance. This method works in Node.js.

Description

width: Specifies the width of the element in pixels
height: Specify the height of the element in pixels

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)

setCornerRadius()

setCornerRadius(radius: number) => this

Round the edges of the canvas

Description

radius: Rounded the edges of the canvas

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)

builder.setCornerRadius(15)

setBackground()

setBackground(imageColor: CanvasImage | CustomColor): this;

Replaces the space of the canvas with an image, a plain color or a degrader

Description

imageColor: Define the type and background to use (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)

Example

const { NessBuilder } = require('ness-canvas')
const { loadImage } = require('canvas')

const builder = new NessBuilder(400, 200)
const img = await loadImage("./assets/image/background/color-2174052.png");

const patern = builder.context.createPattern(img, "repeat");
const linGradient = builder.context.createLinearGradient(0, 0, 400, 0);
const radGradient = builder.context.createRadialGradient(200, 100, 75, 200, 100, 200);

linGradient.addColorStop(...);
radGradient.addColorStop(...);

builder.setBackground(img);
builder.setBackground("Coral");
builder.setBackground("#ff0000");
builder.setBackground("rgb(155, 135, 85)");
builder.setBackground("rgba(155, 135, 85, 0.5)");
builder.setBackground(linGradient);
builder.setBackground(radGradient);
builder.setBackground(patern); // Patern have a bug where he just zoom upper left corner so don't use it

setImage()

setImage(image: CanvasImage, imageOption: ImagelocationOption, locationOption?: DrawlocationOption): this;

Draw an image or a Canvas to S coordinates with D dimensions

Description

image: Image after use LoadImage from Node-Canvas or a Canvas (Patern and Gradiant Not supported)
imageOption: Source image coordinates to draw in the context of Canvas
- sx: Coordinate X in the destination canvas (upper left corner of the source image)
- sy: Coordinate Y in the destination canvas (upper left corner of the source image)
- sWidth?: Width of the image drawn in the Canvas
- sHeight?: Height of the image drawn in the Canvas
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
locationOption?: Modify image coordinates to draw in the context of Canvas
- dx: Coordinate X from image source to draw in the canvas (upper left corner)
- dy: Coordinate Y from image source to draw in the canvas (upper left corner)
- dWidth?: Width of the image Modify (imageOption) to draw in the canvas
- dHeight?: Height of the image Modify (imageOption) to draw in the canvas

Example

const { NessBuilder } = require('ness-canvas')
const { loadImage } = require('canvas')

const builder = new NessBuilder(250, 300)
const image = await loadImage('./assets/image/background/color-2174052.png')

builder.setImage(image, {sx: 25, sy: 25, sWidth: 100, sHeight: 75});

builder.setImage(image, {sx: 25, sy: 25, sWidth: 100, sHeight: 75}, {dx: 0, dy: 25, dWidth: 200, dHeight: 150});

setFrame()

setFrame<T extends FrameType, S extends Shape>(shape: S, frame: FrameOption<S>, options: FrameContent<T>): this;

Draw a frame containing an image, a text or a color

Description

shape: Shape of your frame (Square/Circle/...)
frame: Frame positioning in Canvas
- x: Frame location on axis x
- y: Frame location on axis y
- size: Frame size
- rotate?: Frame Rotation
- QuadrilateralOption?: Option for the square and the rectangle shape
  - radius: Corner Radius
  - width: Replace Size parameter for axis x
  - height: Replace Size parameter for axis y
  width & height is used for the rectangle shape
QuadrilateralOption Additional parameter for the square and Rectangle of shape
options: Modify Frame property
- type: Specifies the type of content to use
- content: Frame content (Image | Gradiant | Patern | Text)
- color: Frame Outline Color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)
- lineWidth?: Frame line size
- textOptions?: Modify Text property (not used if type is not of type Text and content is not a text or a number)
  - size: Text size
  - font?: Change font to use, add * for use font system (*Arial, *Calibri, ...)
  - color?: Text color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)
  - backgroundColor?: Background color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)
  - stroke?: Write text with no fill
  - textAlign?: Align the text on the vertical axis
  - textBaseline?: Align the text on the horizontal axis
  The use of * for font is intended for future addition not yet implemented

Example

const { NessBuilder } = require('ness-canvas')
const { loadImage } = require('canvas')

const builder = new NessBuilder(250, 300)
const image = await loadImage('./assets/image/background/color-2174052.png')
const linGradient = builder.context.createLinearGradient(0, 0, 240, 0);

builder.setFrame("Pentagon", { x: 100, y: 100, size: 80 }, { type: "Color", content: "Coral", color: "Blue" })

builder.setFrame("Square", { x: 10, y: 10, size: 50 }, { type: "Empty", content: "Empty", color: "Blue" })

linGradient.addColorStop(...)

builder.setFrame("Square", { x: 220, y: 165, size: 50 }, { type: "Text", content: "linGrad I am out context but not my color gradiant", color: "Blue", textOptions: { size: 20, color: linGradient, backgroundColor: "White" } })

setText()

setText(text: string, coordinate: {x: number, y: number}, option: TextOption) => this

Writes text in the canvas

Description

text: Text to write
coordinate: Location to write text
- x: location of text on axis x
- y: location of text on axis y
option: Adjust text configuration
- size: Text size
- font?: Change font to use, add * for use font system (*Arial, *Calibri, ...)
- color?: Text color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)
- backgroundColor?: Background color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)
- stroke?: Write text with no fill
- textAlign?: Align the text on the vertical axis
- textBaseline?: Align the text on the horizontal axis
The use of * for font is intended for future addition not yet implemented

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)

builder.setText("Hello World", { x: 62, y: 150 }, { font: "sans-serif", size: 80, color: "#000000", textAlign: "center", textBaseline: "middle" })

setExp()

setExp(option: ExpOption, progress: IntRange<0, 101>, color?: ExpColor) => this

Draws a bar that can act as an experience bar

Description

option: Frame positioning in Canvas
- x: location of th e Experience bar on
- y: location of the Experience bar
- Width: Width of the Experience bar
- Height: Height of the Experience bar
- rotate?: Pivot the Experience bar to a certain degree
- radius?: Round the edge
- alphat?: Set the transparency of the bar in the background
progress: Progress of filling from 0% to 100%
Expcolor?: Adjust Bar color
- color1?: Color of the bar in the background
- color2?: Filling bar color
- outlineColor1?: Color of the contour of the bar in the background
- outlineColor2?: Contour color of the filling bar
Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)

builder.setExp({ x: 30, y: 30, width: 400, height: 30, radius: 10, rotate: 90 }, 50)

builder.setExp({ x: 30, y: 30, width: 400, height: 30 }, 50, { color1: "Red", outlineColor2: "Coral" })

setLoading()

setLoading<D extends ShapeLoad, S extends Shape>(shape: Shape, option: LoadingOption<D, S>): this

Description

shape: Frame shape (Square/Circle/Polygone...)
option: FrameLoading positioning in Canvas.
- x: Frame location on axis x
- y: Frame location on axis y
- size: Frame size
- rotate?: Frame Rotation
- fill: Modify the filling parameters
  - type: Filling type (linear or hourly)
  - start: Only for hourly filling type (Default start to 12h)
- color: Frame content Color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)
- progress: Progress of filling from 0% to 100%
- outline: Modify Outline parameters
  - widht: line size
  - color: line color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)
- QuadrilateralOption?: Option for the square and the rectangle shape
  - radius: Corner Radius
  - width: Replace Size parameter for axis x
  - height: Replace Size parameter for axis y
  width & height is used for the rectangle shape

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)

builder.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 } })

setAxis()

setAxis(axis: Axis): this

Change X and Y axis for the element

Description

axis: Change where is the x0, y0 for the element

The default axis is defined on Center the 0 on the image. If you are used to using Canvas and you do not want to change the start -up axis, you must use the axis BottomRight the BR on the image

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)

builder.setFrame(...) // Axis => O
.setAxis("BottomRight")
.setFrame(...) // Axis => BR

toBuffer()

toBuffer(ext?: ImageExtention | "raw" | "pdf") => Promise<void>

Returns a Buffer of the image contained in the canvas (default png format)

Description

ext: Convert Buffer to image extension, pdf or raw format

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)

builder.toBuffer()

generatedTo()

generatedTo(location: string, name: string, type: ImageExtention) => Promise<void>

Generates an image of the canvas in a specific path

Description

Location: Generation path
name: File name
type: Image extension (png, jpg, jpeg, bmp, tif, tiff)

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)

builder.generatedTo('src/myFolder/', "name", "png")

toDataURL()

toDataURL() => string

Returns canvas to base64 encoded string

Example

const { NessBuilder } = require('ness-canvas')
const builder = new NessBuilder(250, 300)
...

builder.toDataURL()

ness-canvas

Ness-Canvas 2.4.0

Join Discord >

Inslallation

Quick Example

Result

NessBuilder

FilterBuilder && NessBuilder

Documentation

GifBuilder

Builder

Utility Methods

NessBuilder()

setCornerRadius()

setBackground()

setImage()

setFrame()

setText()

setExp()

setLoading()

setAxis()

toBuffer()

generatedTo()

toDataURL()

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

ness-canvas

Ness-Canvas 2.4.0

Join Discord >

Inslallation

Quick Example

Result

NessBuilder

FilterBuilder && NessBuilder

Documentation

GifBuilder

Builder

Utility Methods

NessBuilder()

setCornerRadius()

setBackground()

setImage()

setFrame()

setText()

setExp()

setLoading()

setAxis()

toBuffer()

generatedTo()

toDataURL()

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads