Class LazyCanvas

const { LazyCanvas, EllipseImageLayer, EllipseLayer, TextLayer, Font, CircleLayer } = require('@hitomihiumi/lazy-canvas')
const fs = require('fs')

let font = new Font()
.setFamily("JoeKubert")
.setWeight("regular")
.setPath("./fonts/v_CCJoeKubert-Doubled_v1.3.ttf")

let background = new EllipseImageLayer()
.setX(0)
.setY(0)
.setWidth(600)
.setHeight(200)
.setRadius(50)
.setImage('https://static.zerochan.net/Otosora.full.3420604.jpg')

let blackout = new EllipseLayer()
.setX(0)
.setY(0)
.setWidth(600)
.setHeight(200)
.setRadius(50)
.setColor('#000')
.setAlpha(0.4)

let border = new EllipseLayer()
.setX(1)
.setY(1)
.setWidth(598)
.setHeight(198)
.setRadius(50)
.setColor('#fff')
.setFilled(false)
.setStroke(2)

let avatar = new EllipseImageLayer()
.setX(25)
.setY(25)
.setWidth(150)
.setHeight(150)
.setRadius(50)
.setImage('https://i.pinimg.com/1200x/f3/32/19/f332192b2090f437ca9f49c1002287b6.jpg')

let avatarBorder = new EllipseLayer()
.setX(25)
.setY(25)
.setWidth(150)
.setHeight(150)
.setRadius(50)
.setColor('#fff')
.setFilled(false)
.setStroke(1.5)

let bgprogress = new EllipseLayer()
.setX(190)
.setY(125)
.setWidth(365)
.setHeight(35)
.setRadius(17.5)
.setColor('#fff')

let progress = new EllipseLayer()
.setX(192.5)
.setY(127.5)
.setWidth(180)
.setHeight(30)
.setRadius(15)
.setColor('#ff8a8a')

let lvlbg = new CircleLayer()
.setX(140)
.setY(140)
.setRadius(20)
.setColor('#ff8a8a')

let lvlborder = new CircleLayer()
.setX(140)
.setY(140)
.setRadius(20)
.setColor('#fff')
.setFilled(false)
.setStroke(1.5)

let name = new TextLayer()
.setX(200)
.setY(120)
.setText('LazyCanvas')
.setFont("JoeKubert")
.setFontSize(25)
.setColor('#fff')
.setAlign('left')

let xp = new TextLayer()
.setX(550)
.setY(120)
.setText('50/100')
.setFont("JoeKubert")
.setFontSize(20)
.setColor('#fff')
.setAlign('right')

let lvl = new TextLayer()
.setX(159)
.setY(172)
.setText('1')
.setFont("JoeKubert")
.setFontSize(33)
.setColor('#fff')
.setAlign('center')

const lazy = new LazyCanvas()
.createNewCanvas(600, 200)
.loadFonts(font)
.addLayers(background, blackout, border, avatar, avatarBorder, bgprogress, progress, lvlbg, lvlborder, name, xp, lvl)

async function main() {
const pngData = await lazy.renderImage()
fs.writeFileSync('example.png', pngData)
}

main()

Constructors

Properties

plugins: undefined | LazyCanvasPlugin[]

Methods

  • Parameters

    Returns {
        align:
            | "left"
            | "center"
            | "right"
            | "start"
            | "end";
        alpha: number;
        angle: number;
        angles: number[];
        baseline:
            | "alphabetic"
            | "top"
            | "hanging"
            | "middle"
            | "ideographic"
            | "bottom";
        centering: "legacy" | "new";
        clockwise: boolean;
        color: string | Gradient | Pattern;
        controlPoint: {
            x: number;
            y: number;
        };
        controlPoints: {
            x: number;
            y: number;
        }[];
        direction: "ltr" | "rtl" | "inherit";
        fill: boolean;
        filter: Filter;
        font: string;
        globalComposite:
            | "color"
            | "source-over"
            | "source-in"
            | "source-out"
            | "source-atop"
            | "destination-over"
            | "destination-in"
            | "destination-out"
            | "destination-atop"
            | "lighter"
            | "copy"
            | "xor"
            | "multiply"
            | "screen"
            | "overlay"
            | "darken"
            | "lighten"
            | "color-dodge"
            | "color-burn"
            | "hard-light"
            | "soft-light"
            | "difference"
            | "exclusion"
            | "hue"
            | "saturation"
            | "luminosity";
        height: number;
        image: string | Uint8Array;
        lineDash: number[];
        multiline: boolean;
        outline: LazyCanvasOutline;
        points: {
            x: number;
            y: number;
        }[];
        radius: number;
        rotation: number;
        shadow: {
            shadowBlur: number;
            shadowColor: string | Gradient | Pattern;
            shadowOffsetX: number;
            shadowOffsetY: number;
        };
        sides: number;
        size: number;
        stroke: number;
        structureType: string;
        text: string;
        type: string;
        weight:
            | "normal"
            | "bold"
            | "italic"
            | "bold italic"
            | "regular"
            | "semi-bold"
            | "extra-bold"
            | "light"
            | "extra-light";
        width: number;
        x: number;
        y: number;
        toJSON(): LazyCanvasLayer;
    }

    • align:
          | "left"
          | "center"
          | "right"
          | "start"
          | "end"
    • alpha: number
    • angle: number
    • angles: number[]
    • baseline:
          | "alphabetic"
          | "top"
          | "hanging"
          | "middle"
          | "ideographic"
          | "bottom"
    • centering: "legacy" | "new"
    • clockwise: boolean
    • color: string | Gradient | Pattern
    • controlPoint: {
          x: number;
          y: number;
      }
      • x: number
      • y: number
    • controlPoints: {
          x: number;
          y: number;
      }[]
    • direction: "ltr" | "rtl" | "inherit"
    • fill: boolean
    • filter: Filter
    • font: string
    • globalComposite:
          | "color"
          | "source-over"
          | "source-in"
          | "source-out"
          | "source-atop"
          | "destination-over"
          | "destination-in"
          | "destination-out"
          | "destination-atop"
          | "lighter"
          | "copy"
          | "xor"
          | "multiply"
          | "screen"
          | "overlay"
          | "darken"
          | "lighten"
          | "color-dodge"
          | "color-burn"
          | "hard-light"
          | "soft-light"
          | "difference"
          | "exclusion"
          | "hue"
          | "saturation"
          | "luminosity"
    • height: number
    • image: string | Uint8Array
    • lineDash: number[]
    • multiline: boolean
    • outline: LazyCanvasOutline
    • points: {
          x: number;
          y: number;
      }[]
    • radius: number
    • rotation: number
    • shadow: {
          shadowBlur: number;
          shadowColor: string | Gradient | Pattern;
          shadowOffsetX: number;
          shadowOffsetY: number;
      }
      • shadowBlur: number
      • shadowColor: string | Gradient | Pattern
      • shadowOffsetX: number
      • shadowOffsetY: number
    • sides: number
    • size: number
    • stroke: number
    • structureType: string
    • text: string
    • type: string
    • weight:
          | "normal"
          | "bold"
          | "italic"
          | "bold italic"
          | "regular"
          | "semi-bold"
          | "extra-bold"
          | "light"
          | "extra-light"
    • width: number
    • x: number
    • y: number
    • toJSON:function
  • Parameters

    • ctx: SKRSContext2D
    • img: any
    • x: number
    • y: number
    • w: number
    • h: number
    • r: number

    Returns void

  • Parameters

    • ctx: SKRSContext2D
    • data: any

    Returns Promise<any>

  • Parameters

    • width: number

      The width of the canvas

    • height: number

      The height of the canvas Creates a new canvas with the provided width and height

    Returns LazyCanvas

  • Parameters

    • ctx: SKRSContext2D
    • x: number
    • y: number
    • w: number
    • h: number
    • r: number

    Returns void

  • Returns {
        description?: null | string;
        emoji?: null | string;
        errorImage: null | string;
        fonts?: LazyCanvasFont[];
        height: number;
        layers: LazyCanvasLayer[];
        methods: {
            method: Function;
            name: string;
        }[];
        name?: null | string;
        structureType: string;
        width: number;
        toJSON(): LazyCanvasData;
    }

  • Parameters

    • ctx: SKRSContext2D
    • x: number
    • y: number
    • w: number
    • h: number
    • r: number
    • s: number = 1

    Returns void

  • Parameters

    Returns Promise<null | CanvasPattern>

  • Returns {
        description?: null | string;
        emoji?: null | string;
        errorImage: null | string;
        fonts?: LazyCanvasFont[];
        height: number;
        layers: LazyCanvasLayer[];
        methods: {
            method: Function;
            name: string;
        }[];
        name?: null | string;
        structureType: string;
        width: number;
        toJSON(): LazyCanvasData;
    }