Class BaseLayer

Example

const { LazyCanvas, BaseMethod, BaseLayer, isImageUrlValid, isValidColor } = require('@hitomihiumi/lazy-canvas')

class ExampleImage extends BaseLayer {
  constructor(data = {}) {
      super(data)
      this.data.type = 'exampleimage' // name of layer type
  }

  setWidth(width) {
      if (!width) throw new Error('Width must be provided')
      if (isNaN(width)) throw new Error('Width must be a number')
      this.data.width = width
      return this
  }

  setHeight(height) {
      if (!height) throw new Error('Height must be provided')
      if (isNaN(height)) throw new Error('Height must be a number')
      this.data.height = height
      return this
  }

  // Example of function for set image
  setImage(image) {
      if (!image) throw new Error('Image must be provided')
      if (!isImageUrlValid(image)) throw new Error('Image must be a valid URL')
      this.data.image = image
      return this
  }
}

class ExampleRect extends BaseLayer {
  constructor(data = {}) {
      super(data)
      this.data.type = 'examplerect' // name of layer type
  }

  setWidth(width) {
      if (!width) throw new Error('Width must be provided')
      if (isNaN(width)) throw new Error('Width must be a number')
      this.data.width = width
      return this
  }

  setHeight(height) {
      if (!height) throw new Error('Height must be provided')
      if (isNaN(height)) throw new Error('Height must be a number')
      this.data.height = height
      return this
  }

  // Example of function for set color
  setColor(color) {
      if (!color) throw new Error('Color must be provided')
      if (!isValidColor(color)) throw new Error('Color must be a string')
      this.data.color = color
      return this
  }
}

//...

const exampleImage = new ExampleImage()
.setX(100)
.setY(100)
.setWidth(200)
.setHeight(200)
.setImage('https://i.pinimg.com/1200x/f3/32/19/f332192b2090f437ca9f49c1002287b6.jpg')

const exampleRect = new ExampleRect()
.setX(100)
.setY(300)
.setWidth(200)
.setHeight(200)
.setColor('#ff8a8a')

const lazy = new LazyCanvas()
.addLayers(
  exampleImage, exampleRect
)
//...

Hierarchy (view full)

Constructors

constructor

Properties

data

Methods

setAlpha setGlobalCompositeOperation setRotation setShadowBlur setShadowColor setShadowOffsetX setShadowOffsetY setX setY toJSON

Constructors

constructor

Properties

data

data: LazyCanvasLayer

Methods

setAlpha

setGlobalCompositeOperation

  • setGlobalCompositeOperation(operation): BaseLayer

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

setRotation

setShadowBlur

setShadowColor

setShadowOffsetX

setShadowOffsetY

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