Class TextLayer

Example

const { LazyCanvas, TextLayer } = require('@hitomihiumi/lazy-canvas')
//...

// Multiline text
let textOne = new TextLayer()
.setText("This is a test of the LazyCanvas library.")
.setFont("JoeKubert")
.setFontSize(25)
.setWeight("regular")
.setColor("#fff")
.setMultiline(true)
.setX(50)
.setY(50)
.setHeight(100)
.setWidth(500)

// Single line text
let textTwo = new TextLayer()
.setText("Amazing text with amazing font!")
.setFont("Koulen")
.setFontSize(20)
.setWeight("regular")
.setColor("#fff")
.setMultiline(false)
.setAlign("start")
.setX(50)
.setY(130)

const lazy = new LazyCanvas()
.addLayers(textOne, textTwo)
//...

Hierarchy (view full)

Constructors

constructor

Properties

data

Methods

setAlign setAlpha setBaseline setColor setDirection setFilled setFont setFontSize setGlobalCompositeOperation setHeight setMultiline setOutline setRotation setShadowBlur setShadowColor setShadowOffsetX setShadowOffsetY setText setWeight setWidth setX setY toJSON

Constructors

constructor

Properties

data

data: LazyCanvasLayer

Methods

setAlign

  • setAlign(align): TextLayer

  • Parameters

    • align:
          | "left"
          | "center"
          | "right"
          | "start"
          | "end"

      The alignment of the text Align types: left, center, right, start, end

    Returns TextLayer

setAlpha

setBaseline

  • setBaseline(baseline): TextLayer

  • Parameters

    • baseline:
          | "alphabetic"
          | "top"
          | "hanging"
          | "middle"
          | "ideographic"
          | "bottom"

      The baseline of the text

    Returns TextLayer

setColor

setDirection

setFilled

setFont

setFontSize

setGlobalCompositeOperation

  • setGlobalCompositeOperation(operation): TextLayer

  • Parameters

    • operation:
          | "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"

      The global composite operation of the layer

    Returns TextLayer

setHeight

setMultiline

setOutline

setRotation

setShadowBlur

setShadowColor

setShadowOffsetX

setShadowOffsetY

setText

setWeight

  • setWeight(weight): TextLayer

  • Parameters

    • weight:
          | "normal"
          | "bold"
          | "italic"
          | "bold italic"
          | "regular"
          | "semi-bold"
          | "extra-bold"
          | "light"
          | "extra-light"

      The weight of the text Weight types: normal, bold, italic, bold italic, regular

    Returns TextLayer

setWidth

setX

setY

toJSON

  • toJSON(): {
        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;
    }

  • 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

Settings

Member Visibility

On This Page

Constructors
Properties
Methods