skia
    Preparing search index...

    Interface CanvasKit

    interface CanvasKit {
        Affinity: AffinityEnumValues;
        AlphaType: AlphaTypeEnumValues;
        BLACK: Color;
        Blender: BlenderFactory;
        BlendMode: BlendModeEnumValues;
        BLUE: Color;
        BlurStyle: BlurStyleEnumValues;
        ClipOp: ClipOpEnumValues;
        CLOSE_VERB: number;
        CodeUnitFlags: CodeUnitFlagsEnumValues;
        ColorChannel: ColorChannelEnumValues;
        ColorFilter: ColorFilterFactory;
        ColorMatrix: ColorMatrixHelpers;
        ColorSpace: ColorSpaceEnumValues;
        ColorType: ColorTypeEnumValues;
        CONIC_VERB: number;
        ContourMeasureIter: ContourMeasureIterConstructor;
        CUBIC_VERB: number;
        CYAN: Color;
        DecorationStyle: DecorationStyleEnumValues;
        FillType: FillTypeEnumValues;
        FilterMode: FilterModeEnumValues;
        Font: FontConstructor;
        FontCollection: FontCollectionFactory;
        FontEdging: FontEdgingEnumValues;
        FontHinting: FontHintingEnumValues;
        FontMgr: FontMgrFactory;
        FontSlant: FontSlantEnumValues;
        FontWeight: FontWeightEnumValues;
        FontWidth: FontWidthEnumValues;
        GlyphRunFlags: GlyphRunFlagValues;
        gpu?: boolean;
        GREEN: Color;
        ImageData: ImageDataConstructor;
        ImageFilter: ImageFilterFactory;
        ImageFormat: ImageFormatEnumValues;
        InputState: InputStateEnumValues;
        LINE_VERB: number;
        LineThroughDecoration: number;
        M44: Matrix4x4Helpers;
        MAGENTA: Color;
        managed_skottie?: boolean;
        MaskFilter: MaskFilterFactory;
        Matrix: Matrix3x3Helpers;
        MipmapMode: MipmapModeEnumValues;
        ModifierKey: ModifierKeyEnumValues;
        MOVE_VERB: number;
        NoDecoration: number;
        OverlineDecoration: number;
        Paint: DefaultConstructor<Paint>;
        PaintStyle: PaintStyleEnumValues;
        ParagraphBuilder: ParagraphBuilderFactory;
        ParagraphStyle: ParagraphStyleConstructor;
        Path: PathConstructorAndFactory;
        Path1DEffect: Path1DEffectStyleEnumValues;
        PathBuilder: PathBuilderConstructor;
        PathEffect: PathEffectFactory;
        PathOp: PathOpEnumValues;
        PDFDocument: new (metadata: PDFMetadata) => PDFDocument;
        PDFMetadata: new () => PDFMetadata;
        PictureRecorder: DefaultConstructor<PictureRecorder>;
        PlaceholderAlignment: PlaceholderAlignmentEnumValues;
        PointMode: PointModeEnumValues;
        QUAD_VERB: number;
        RectHeightStyle: RectHeightStyleEnumValues;
        RectWidthStyle: RectWidthStyleEnumValues;
        RED: Color;
        ResizePolicy: ResizePolicyEnumValues;
        rt_effect?: boolean;
        RuntimeEffect: RuntimeEffectFactory;
        SaveLayerF16ColorType: number;
        SaveLayerInitWithPrevious: number;
        Shader: ShaderFactory;
        ShadowDirectionalLight: number;
        ShadowGeometricOnly: number;
        ShadowTransparentOccluder: number;
        Shaper: ShaperFactory;
        skottie?: boolean;
        SlottableTextProperty: SlottableTextPropertyConstructor;
        StrokeCap: StrokeCapEnumValues;
        StrokeJoin: StrokeJoinEnumValues;
        SVGCanvas: new (width: number, height: number, flags: number) => SVGCanvas;
        TextAlign: TextAlignEnumValues;
        TextBaseline: TextBaselineEnumValues;
        TextBlob: TextBlobFactory;
        TextDirection: TextDirectionEnumValues;
        TextHeightBehavior: TextHeightBehaviorEnumValues;
        TextStyle: TextStyleConstructor;
        TileMode: TileModeEnumValues;
        TRANSPARENT: Color;
        Typeface: TypefaceFactory;
        TypefaceFontProvider: TypefaceFontProviderFactory;
        UnderlineDecoration: number;
        Vector: VectorHelpers;
        VertexMode: VertexModeEnumValues;
        VerticalTextAlign: VerticalTextAlignEnumValues;
        WHITE: Color;
        YELLOW: Color;
        Color(r: number, g: number, b: number, a?: number): Color;
        Color4f(r: number, g: number, b: number, a?: number): Color;
        ColorAsInt(r: number, g: number, b: number, a?: number): number;
        computeTonalColors(colors: TonalColorsInput): TonalColorsOutput;
        Free(m: MallocObj): void;
        getColorComponents(c: Color): number[];
        getDecodeCacheLimitBytes(): number;
        getDecodeCacheUsedBytes(): number;
        getShadowLocalBounds(
            ctm: InputMatrix,
            path: Path,
            zPlaneParams: InputVector3,
            lightPos: InputVector3,
            lightRadius: number,
            flags: number,
            dstRect?: Rect,
        ): Rect | null;
        LTRBiRect(left: number, top: number, right: number, bottom: number): IRect;
        LTRBRect(left: number, top: number, right: number, bottom: number): Rect;
        MakeAnimatedImageFromEncoded(
            bytes: ArrayBuffer | Uint8Array<ArrayBufferLike>,
        ): AnimatedImage | null;
        MakeAnimation(json: string): SkottieAnimation;
        MakeCanvas(width: number, height: number): EmulatedCanvas2D;
        MakeCanvasSurface(
            canvas: string | HTMLCanvasElement | OffscreenCanvas,
        ): Surface | null;
        MakeImage(
            info: ImageInfo,
            bytes:
                | number[]
                | Uint8Array<ArrayBufferLike>
                | Uint8ClampedArray<ArrayBufferLike>,
            bytesPerRow: number,
        ): Image | null;
        MakeImageFromCanvasImageSource(src: CanvasImageSource): Image;
        MakeImageFromEncoded(
            bytes: ArrayBuffer | Uint8Array<ArrayBufferLike>,
        ): Image | null;
        MakeManagedAnimation(
            json: string,
            assets?: Record<string, ArrayBuffer>,
            filterPrefix?: string,
            soundMap?: SoundMap,
        ): ManagedSkottieAnimation;
        MakePicture(
            bytes: ArrayBuffer | Uint8Array<ArrayBufferLike>,
        ): SkPicture | null;
        MakeRasterDirectSurface(
            ii: ImageInfo,
            pixels: MallocObj,
            bytesPerRow: number,
        ): Surface | null;
        MakeSWCanvasSurface(
            canvas: string | HTMLCanvasElement | OffscreenCanvas,
        ): Surface | null;
        MakeVertices(
            mode: EmbindEnumEntity,
            positions: InputFlattenedPointArray,
            textureCoordinates?: InputFlattenedPointArray | null,
            colors?: Float32Array<ArrayBufferLike> | ColorIntArray | null,
            indices?: number[] | null,
            isVolatile?: boolean,
        ): Vertices;
        Malloc(typedArray: TypedArrayConstructor, len: number): MallocObj;
        MallocGlyphIDs(len: number): MallocObj;
        multiplyByAlpha(c: Color, alpha: number): Color;
        parseColorString(color: string, colorMap?: Record<string, Color>): Color;
        PDFDateTime(): PDFDateTime;
        RRectXY(rect: InputRect, rx: number, ry: number): RRect;
        setDecodeCacheLimitBytes(size: number): void;
        XYWHiRect(x: number, y: number, width: number, height: number): IRect;
        XYWHRect(x: number, y: number, width: number, height: number): Rect;
    }
    Index

    Properties

    Methods

    Properties

    BLACK: Color
    BLUE: Color
    CLOSE_VERB: number
    ColorFilter: ColorFilterFactory
    ColorMatrix: ColorMatrixHelpers
    CONIC_VERB: number
    ContourMeasureIter: ContourMeasureIterConstructor
    CUBIC_VERB: number
    CYAN: Color
    DecorationStyle: DecorationStyleEnumValues
    FontCollection: FontCollectionFactory
    GlyphRunFlags: GlyphRunFlagValues
    gpu?: boolean
    GREEN: Color
    ImageFilter: ImageFilterFactory
    LINE_VERB: number
    LineThroughDecoration: number
    MAGENTA: Color
    managed_skottie?: boolean
    MaskFilter: MaskFilterFactory
    MOVE_VERB: number
    NoDecoration: number
    OverlineDecoration: number
    ParagraphBuilder: ParagraphBuilderFactory
    PathEffect: PathEffectFactory
    PDFDocument: new (metadata: PDFMetadata) => PDFDocument

    Type Declaration

    PDFMetadata: new () => PDFMetadata

    Type Declaration

    PlaceholderAlignment: PlaceholderAlignmentEnumValues
    QUAD_VERB: number
    RectHeightStyle: RectHeightStyleEnumValues
    RectWidthStyle: RectWidthStyleEnumValues
    RED: Color
    rt_effect?: boolean
    RuntimeEffect: RuntimeEffectFactory
    SaveLayerF16ColorType: number
    SaveLayerInitWithPrevious: number
    ShadowDirectionalLight: number

    Use this shadow flag to indicate the light position represents a direction and light radius is blur radius at elevation 1.

    ShadowGeometricOnly: number

    Use this shadow flag to not use analytic shadows.

    ShadowTransparentOccluder: number

    Use this shadow flag to indicate the occluding object is not opaque. Knowing that the occluder is opaque allows us to cull shadow geometry behind it and improve performance.

    skottie?: boolean
    SlottableTextProperty: SlottableTextPropertyConstructor
    SVGCanvas: new (width: number, height: number, flags: number) => SVGCanvas

    Type Declaration

      • new (width: number, height: number, flags: number): SVGCanvas
      • Constructs a new SVGCanvas.

        Parameters

        • width: number
        • height: number
        • flags: number

          Flags for SVG generation.

        Returns SVGCanvas

    TextBlob: TextBlobFactory
    TextHeightBehavior: TextHeightBehaviorEnumValues
    TRANSPARENT: Color
    Typeface: TypefaceFactory
    TypefaceFontProvider: TypefaceFontProviderFactory
    UnderlineDecoration: number
    VerticalTextAlign: VerticalTextAlignEnumValues
    WHITE: Color
    YELLOW: Color

    Methods

    • Constructs a Color with the same API as CSS's rgba(), that is Internally, Colors are four unpremultiplied 32-bit floats: r, g, b, a. In order to construct one with more precision or in a wider gamut, use CanvasKit.Color4f().

      Parameters

      • r: number

        red value, clamped to [0, 255].

      • g: number

        green value, clamped to [0, 255].

      • b: number

        blue value, clamped to [0, 255].

      • Optionala: number

        alpha value, from 0 to 1.0. By default is 1.0 (opaque).

      Returns Color

    • Construct a 4-float color. Float values are typically between 0.0 and 1.0.

      Parameters

      • r: number

        red value.

      • g: number

        green value.

      • b: number

        blue value.

      • Optionala: number

        alpha value. By default is 1.0 (opaque).

      Returns Color

    • Constructs a Color as a 32 bit unsigned integer, with 8 bits assigned to each channel. Channels are expected to be between 0 and 255 and will be clamped as such. If a is omitted, it will be 255 (opaque).

      This is not the preferred way to use colors in Skia APIs, use Color or Color4f.

      Parameters

      • r: number

        red value, clamped to [0, 255].

      • g: number

        green value, clamped to [0, 255].

      • b: number

        blue value, clamped to [0, 255].

      • Optionala: number

        alpha value, from 0 to 1.0. By default is 1.0 (opaque).

      Returns number

    • Free frees the memory returned by Malloc. Any memory allocated by CanvasKit.Malloc needs to be released with CanvasKit.Free.

      Parameters

      Returns void

    • Returns a css style [r, g, b, a] where r, g, b are returned as ints in the range [0, 255] and where a is scaled between 0 and 1.0. [Deprecated] - this is trivial now that Color is 4 floats.

      Parameters

      Returns number[]

    • Returns the max size of the global cache for bitmaps used by CanvasKit.

      Returns number

    • Returns the current size of the global cache for bitmaps used by CanvasKit.

      Returns number

    • Generate bounding box for shadows relative to path. Includes both the ambient and spot shadow bounds. This pairs with Canvas.drawShadow(). See SkShadowUtils.h for more details.

      Parameters

      • ctm: InputMatrix

        Current transformation matrix to device space.

      • path: Path

        The occluder used to generate the shadows.

      • zPlaneParams: InputVector3

        Values for the plane function which returns the Z offset of the occluder from the canvas based on local x and y values (the current matrix is not applied).

      • lightPos: InputVector3

        The 3D position of the light relative to the canvas plane. This is independent of the canvas's current matrix.

      • lightRadius: number

        The radius of the disc light.

      • flags: number

        See SkShadowUtils.h; 0 means use default options.

      • OptionaldstRect: Rect

        if provided, the bounds will be copied into this rect instead of allocating a new one.

      Returns Rect | null

      The bounding rectangle or null if it could not be computed.

    • Returns a rectangle with the given integer paramaters. See Rect.h for more.

      Parameters

      • left: number

        The x coordinate of the upper-left corner.

      • top: number

        The y coordinate of the upper-left corner.

      • right: number

        The x coordinate of the lower-right corner.

      • bottom: number

        The y coordinate of the lower-right corner.

      Returns IRect

    • Returns a rectangle with the given paramaters. See Rect.h for more.

      Parameters

      • left: number

        The x coordinate of the upper-left corner.

      • top: number

        The y coordinate of the upper-left corner.

      • right: number

        The x coordinate of the lower-right corner.

      • bottom: number

        The y coordinate of the lower-right corner.

      Returns Rect

    • Decodes the given bytes into an animated image. Returns null if the bytes were invalid. The passed in bytes will be copied into the WASM heap, so the caller can dispose of them.

      The returned AnimatedImage will be "pointing to" the first frame, i.e. currentFrameDuration and makeImageAtCurrentFrame will be referring to the first frame.

      Parameters

      • bytes: ArrayBuffer | Uint8Array<ArrayBufferLike>

      Returns AnimatedImage | null

    • Returns a Skottie animation built from the provided json string. Requires that Skottie be compiled into CanvasKit. Note: this animation will not be able to display text or images.

      Parameters

      • json: string

      Returns SkottieAnimation

    • Creates a Surface on a given canvas. If both GPU and CPU modes have been compiled in, this will first try to create a GPU surface and then fallback to a CPU one if that fails. If just the CPU mode has been compiled in, a CPU surface will be created.

      Parameters

      • canvas: string | HTMLCanvasElement | OffscreenCanvas

        either a canvas or a string with the DOM id of it.

      Returns Surface | null

      • Use MakeSWCanvasSurface, MakeWebGLCanvasSurface, or MakeGPUCanvasSurface.
    • Returns an image with the given pixel data and format. Note that we will always make a copy of the pixel data, because of inconsistencies in behavior between GPU and CPU (i.e. the pixel data will be turned into a GPU texture and not modifiable after creation).

      Parameters

      • info: ImageInfo
      • bytes: number[] | Uint8Array<ArrayBufferLike> | Uint8ClampedArray<ArrayBufferLike>

        bytes representing the pixel data.

      • bytesPerRow: number

      Returns Image | null

    • Returns an Image with the data from the provided CanvasImageSource (e.g. ). This will use the browser's built in codecs, in that src will be drawn to a canvas and then readback and placed into an Image.

      Parameters

      • src: CanvasImageSource

      Returns Image

    • Return an Image backed by the encoded data, but attempt to defer decoding until the image is actually used/drawn. This deferral allows the system to cache the result, either on the CPU or on the GPU, depending on where the image is drawn. This decoding uses the codecs that have been compiled into CanvasKit. If the bytes are invalid (or an unrecognized codec), null will be returned. See Image.h for more details.

      Parameters

      • bytes: ArrayBuffer | Uint8Array<ArrayBufferLike>

      Returns Image | null

    • Returns a managed Skottie animation built from the provided json string and assets. Requires that Skottie be compiled into CanvasKit.

      Parameters

      • json: string
      • Optionalassets: Record<string, ArrayBuffer>

        a dictionary of named blobs: { key: ArrayBuffer, ... }

      • OptionalfilterPrefix: string

        an optional string acting as a name filter for selecting "interesting" Lottie properties (surfaced in the embedded player controls)

      • OptionalsoundMap: SoundMap

        an optional mapping of sound identifiers (strings) to AudioPlayers. Only needed if the animation supports sound.

      Returns ManagedSkottieAnimation

    • Returns an SkPicture which has been serialized previously to the given bytes.

      Parameters

      • bytes: ArrayBuffer | Uint8Array<ArrayBufferLike>

      Returns SkPicture | null

    • Creates a Raster (CPU) Surface that will draw into the provided Malloc'd buffer. This allows clients to efficiently be able to read the current pixels w/o having to copy. The length of pixels must be at least height * bytesPerRow bytes big.

      Parameters

      • ii: ImageInfo
      • pixels: MallocObj
      • bytesPerRow: number

        How many bytes are per row. This is at least width * bytesPerColorType. For example, an 8888 ColorType has 4 bytes per pixel, so a 5 pixel wide 8888 surface needs at least 5 * 4 = 20 bytesPerRow. Some clients may have more than the usual to make the data line up with a particular multiple.

      Returns Surface | null

    • Creates a CPU backed (aka raster) surface.

      Parameters

      • canvas: string | HTMLCanvasElement | OffscreenCanvas

        either a canvas or a string with the DOM id of it.

      Returns Surface | null

    • Malloc returns a TypedArray backed by the C++ memory of the given length. It should only be used by advanced users who can manage memory and initialize values properly. When used correctly, it can save copying of data between JS and C++. When used incorrectly, it can lead to memory leaks. Any memory allocated by CanvasKit.Malloc needs to be released with CanvasKit.Free.

      const mObj = CanvasKit.Malloc(Float32Array, 20); Get a TypedArray view around the malloc'd memory (this does not copy anything). const ta = mObj.toTypedArray(); // store data into ta const cf = CanvasKit.ColorFilter.MakeMatrix(ta); // mObj could also be used.

      // eventually... CanvasKit.Free(mObj);

      Parameters

      • typedArray: TypedArrayConstructor

        constructor for the typedArray.

      • len: number

        number of elements to store.

      Returns MallocObj

    • As Malloc but for GlyphIDs. This helper exists to make sure the JS side and the C++ side stay in agreement with how wide GlyphIDs are.

      Parameters

      • len: number

        number of GlyphIDs to make space for.

      Returns MallocObj

    • Returns a copy of the passed in color with a new alpha value applied. [Deprecated] - this is trivial now that Color is 4 floats.

      Parameters

      Returns Color

    • Takes in a CSS color value and returns a CanvasKit.Color (which is an array of 4 floats in RGBA order). An optional colorMap may be provided which maps custom strings to values. In the CanvasKit canvas2d shim layer, we provide this map for processing canvas2d calls, but not here for code size reasons.

      Parameters

      • color: string
      • OptionalcolorMap: Record<string, Color>

      Returns Color

    • Returns a rectangle with rounded corners consisting of the given rectangle and the same radiusX and radiusY for all four corners.

      Parameters

      • rect: InputRect

        The base rectangle.

      • rx: number

        The radius of the corners in the x direction.

      • ry: number

        The radius of the corners in the y direction.

      Returns RRect

    • Sets the max size of the global cache for bitmaps used by CanvasKit.

      Parameters

      • size: number

        number of bytes that can be used to cache bitmaps.

      Returns void

    • Returns a rectangle with the given paramaters. See Rect.h for more.

      Parameters

      • x: number

        The x coordinate of the upper-left corner.

      • y: number

        The y coordinate of the upper-left corner.

      • width: number

        The width of the rectangle.

      • height: number

        The height of the rectangle.

      Returns IRect

    • Returns a rectangle with the given paramaters. See Rect.h for more.

      Parameters

      • x: number

        The x coordinate of the upper-left corner.

      • y: number

        The y coordinate of the upper-left corner.

      • width: number

        The width of the rectangle.

      • height: number

        The height of the rectangle.

      Returns Rect