Constructors
Properties
Methods
arc
- arc(ctx, data, filled?): void
Returns void
arcTo
- arcTo(ctx, data): void
Returns void
bezierCurve
- bezierCurve(ctx, data): void
Returns void
centring
- centring(data): {
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
controlPoint: {
x: number;
y: number;
}
controlPoints: {
x: number;
y: number;
}[]
direction: "ltr" | "rtl" | "inherit"
fill: boolean
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
points: {
x: number;
y: number;
}[]
radius: number
rotation: number
shadow: {
shadowBlur: number;
shadowColor: string | Gradient | Pattern;
shadowOffsetX: number;
shadowOffsetY: number;
}
shadowBlur: number
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
circle
- circle(ctx, data, filled?): void
Returns void
clipper
- clipper(ctx, img, x, y, w, h, r): void
Parameters
- ctx: SKRSContext2D
- img: any
- x: number
- y: number
- w: number
- h: number
- r: number
Returns void
colorRender
- colorRender(ctx, data): Promise<any>
Parameters
- ctx: SKRSContext2D
- data: any
Returns Promise<any>
createNewCanvas
- createNewCanvas(width, height): LazyCanvas
Parameters
- width: number
- height: number
ellipse
- ellipse(ctx, data, filled?): void
Returns void
ellipseImage
- ellipseImage(ctx, data): Promise<void>
Returns Promise<void>
fillRoundedRect
- fillRoundedRect(ctx, x, y, w, h, r): void
Parameters
- ctx: SKRSContext2D
- x: number
- y: number
- w: number
- h: number
- r: number
Returns void
filterApply
- filterApply(image, filter): Promise<void>
Returns Promise<void>
getData
- getData(): {
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;
} 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;
}
Optional
description?: null | string
Optional
emoji?: null | string
errorImage: null | string
height: number
methods: {
method: Function;
name: string;
}[]
Optional
name?: null | string
structureType: string
width: number
toJSON:function
getIndexOfLayer
- getIndexOfLayer(data): number
Returns number
image
- image(ctx, data): Promise<void>
Returns Promise<void>
line
- line(ctx, data): void
Returns void
modifyLayer
- modifyLayer(index, param, newData): LazyCanvas
Parameters
- index: number
- param: string
- newData: any
ngon
- ngon(ctx, data, filled?): void
Returns void
outLineRender
- outLineRender(ctx, data): Promise<void>
Returns Promise<void>
outerlineRounded
- outerlineRounded(ctx, x, y, w, h, r, s?): void
Parameters
- ctx: SKRSContext2D
- x: number
- y: number
- w: number
- h: number
- r: number
- s: number = 1
Returns void
patternRender
- patternRender(ctx, data): Promise<null | CanvasPattern>
Returns Promise<null | CanvasPattern>
quadraticCurve
- quadraticCurve(ctx, data): void
Returns void
rectangle
- rectangle(ctx, data, filled?): void
Returns void
renderImage
- renderImage(WhatINeed?): Promise<undefined | SKRSContext2D | ArrayBufferView>
Returns Promise<undefined | SKRSContext2D | ArrayBufferView>
rotate
- rotate(ctx, data): void
Returns void
square
- square(ctx, data, filled?): void
Returns void
textRender
- textRender(ctx, data): void
Returns void
toJSON
- toJSON(): {
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;
} 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;
}
Optional
description?: null | string
Optional
emoji?: null | string
errorImage: null | string
height: number
methods: {
method: Function;
name: string;
}[]
Optional
name?: null | string
structureType: string
width: number
toJSON:function
Example