Ness-Canvas 2.5.3

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

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

Builder

• NessBuilder()
• ~~RankupBuilder()~~
• ~~CustomProfile()~~

Methods

• context

• setCornerRadius

• setBackground

• setAxis

• setFont

• setText

• setImage

• setFrame

• setBanner (Not add to the doc yet)

• setExp

• setLoading (Doc need to be update)

• toBuffer

• generatedTo

• toDataURL

Types

• CustomColor (Not add to the doc yet)
• CanvasImage (Not add to the doc yet)
• IntRange (Not add to the doc yet)
• Text (Not add to the doc yet)

NessBuilder()

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

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

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

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

context

context => CanvasRenderingContext2D

Canvas context.

Give access to Node Canvas context methods

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

builder.context.beginPath()...
builder.context.moveTo...
...
builder.context.clip...
builder.context.closePath...
builder.context.fill...

setCornerRadius()

setCornerRadius(radius: number, outline?: number, color?: CustomColor) => this

Type definition CustomColor

Round the edges of the canvas

• radius: Rounded the edges of the canvas
• outline: ouline size (default 3)
• color: outline color (default white)

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

builder.setCornerRadius(15)

setBackground()

setBackground(imageColor: CanvasImage | CustomColor): this;

Type definition CanvasImage | CustomColor

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

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

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

setAxis()

setBackground(imageColor: CanvasImage | CustomColor): this;

Type definition CanvasImage | CustomColor

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

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

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

setFont()

setFont(name: string, size?: number): this

Change Font used

• name: System font name
• size: Font default size

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.

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

builder.setFont("Sketch Gothic School", 50)

.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"}})
...
.setFont("Arial", 15)
.setText(...)
...

setText()

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

Type definition Text

Writes text in the canvas

• text: Text to write

• • x: location of text on axis x
  • y: location of text on axis y
• • 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

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" })

setImage()

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

Type definition CanvasImage

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

• image: Image after use LoadImage from Node-Canvas or a Canvas (Patern and Gradiant Not supported)

• • 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

• • 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

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: Frame<S>, content: Content<T>): this;

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

• shape: Shape of your frame (Square/Circle/...)

• • • x: Frame location on axis x
    • y: Frame location on axis y

  • size: Frame size

  • • size: Frame Outline Size
    • color: Frame Outline Color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)

  • rotate?: Frame Rotation

  • • 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

  Quadrilateral Additional parameter for the square and Rectangle of shape

• • type: Specifies the type of content to use

  • content: Frame content (Image | Gradiant | Patern | Text)

  • • size: Text size
    • 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

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", { location: { x: 100, y: 100 }, size: 80 }, { type: "Color", content: "Coral", color: "Blue" })

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

linGradient.addColorStop(...)

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

setExp()

setExp(exp: Experience, progress: IntRange<0, 101>, color?: ExperienceColor) => this

Type definition IntRange

Draws a bar that can act as an experience bar

• • • x: Experience bar location on axis x
    • y: Experience bar location on axis y
  • • 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

• progress: Progress of filling from 0% to 100%

• • backColor: Color of the bar in the background
  • color: Filling bar color
  • outlineColor: Color of the contour of the bar in the background
  • backOutlineColor: Contour color of the filling bar
  • transparency?: Background transparency

  Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern

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

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

builder.setExp({ location: { x: 30, y: 30 }, size: { width: 400, height: 30 } }, 50, { backColor: "Red", backOutlineColor: "Coral" })

setLoading()

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

• shape: Frame shape (Square/Circle/Polygone...)

• • x: Frame location on axis x

  • y: Frame location on axis y

  • size: Frame size

  • rotate?: Frame Rotation

  • • 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%

  • • widht: line size
    • color: line color (Valid syntaxes: #hex(a) | rgb(a) | colorName | CanvasGradient | CanvasPattern)
  • • 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

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

toBuffer()

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

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

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

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

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

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

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

builder.toDataURL()

CustomColor

CanvasImage

IntRange

Text