skia
    Preparing search index...

    Interface Canvas

    See SkCanvas.h for more information on this class.

    interface Canvas {
        _type: "Canvas";
        clear(color: InputColor): void;
        clipPath(path: Path, op: EmbindEnumEntity, doAntiAlias: boolean): void;
        clipRect(rect: InputRect, op: EmbindEnumEntity, doAntiAlias: boolean): void;
        clipRRect(
            rrect: InputRRect,
            op: EmbindEnumEntity,
            doAntiAlias: boolean,
        ): void;
        concat(m: InputMatrix): void;
        delete(): void;
        deleteLater(): void;
        drawArc(
            oval: InputRect,
            startAngle: number,
            sweepAngle: number,
            useCenter: boolean,
            paint: Paint,
        ): void;
        drawAtlas(
            atlas: Image,
            srcRects: InputFlattenedRectangleArray,
            dstXforms: InputFlattenedRSXFormArray,
            paint: Paint,
            blendMode?: EmbindEnumEntity | null,
            colors?: ColorIntArray | null,
            sampling?: CubicResampler | FilterOptions,
        ): void;
        drawCircle(cx: number, cy: number, radius: number, paint: Paint): void;
        drawColor(color: InputColor, blendMode?: EmbindEnumEntity): void;
        drawColorComponents(
            r: number,
            g: number,
            b: number,
            a: number,
            blendMode?: EmbindEnumEntity,
        ): void;
        drawColorInt(color: number, blendMode?: EmbindEnumEntity): void;
        drawDRRect(outer: InputRRect, inner: InputRRect, paint: Paint): void;
        drawGlyphs(
            glyphs: InputGlyphIDArray,
            positions: InputFlattenedPointArray,
            x: number,
            y: number,
            font: Font,
            paint: Paint,
        ): void;
        drawGlyphsRSXform(
            glyphs: InputGlyphIDArray,
            xforms: InputFlattenedRSXFormArray,
            x: number,
            y: number,
            font: Font,
            paint: Paint,
        ): void;
        drawImage(
            img: Image,
            left: number,
            top: number,
            paint?: Paint | null,
        ): void;
        drawImageCubic(
            img: Image,
            left: number,
            top: number,
            B: number,
            C: number,
            paint?: Paint | null,
        ): void;
        drawImageNine(
            img: Image,
            center: InputIRect,
            dest: InputRect,
            filter: EmbindEnumEntity,
            paint?: Paint | null,
        ): void;
        drawImageOptions(
            img: Image,
            left: number,
            top: number,
            fm: EmbindEnumEntity,
            mm: EmbindEnumEntity,
            paint?: Paint | null,
        ): void;
        drawImageRect(
            img: Image,
            src: InputRect,
            dest: InputRect,
            paint: Paint,
            fastSample?: boolean,
        ): void;
        drawImageRectCubic(
            img: Image,
            src: InputRect,
            dest: InputRect,
            B: number,
            C: number,
            paint?: Paint | null,
        ): void;
        drawImageRectOptions(
            img: Image,
            src: InputRect,
            dest: InputRect,
            fm: EmbindEnumEntity,
            mm: EmbindEnumEntity,
            paint?: Paint | null,
        ): void;
        drawLine(
            x0: number,
            y0: number,
            x1: number,
            y1: number,
            paint: Paint,
        ): void;
        drawOval(oval: InputRect, paint: Paint): void;
        drawPaint(paint: Paint): void;
        drawParagraph(p: Paragraph, x: number, y: number): void;
        drawPatch(
            cubics: InputFlattenedPointArray,
            colors?: ColorIntArray | Color[] | null,
            texs?: InputFlattenedPointArray | null,
            mode?: EmbindEnumEntity | null,
            paint?: Paint,
        ): void;
        drawPath(path: Path, paint: Paint): void;
        drawPicture(skp: SkPicture): void;
        drawPoints(
            mode: EmbindEnumEntity,
            points: InputFlattenedPointArray,
            paint: Paint,
        ): void;
        drawRect(rect: InputRect, paint: Paint): void;
        drawRect4f(
            left: number,
            top: number,
            right: number,
            bottom: number,
            paint: Paint,
        ): void;
        drawRRect(rrect: InputRRect, paint: Paint): void;
        drawShadow(
            path: Path,
            zPlaneParams: InputVector3,
            lightPos: InputVector3,
            lightRadius: number,
            ambientColor: InputColor,
            spotColor: InputColor,
            flags: number,
        ): void;
        drawText(str: string, x: number, y: number, paint: Paint, font: Font): void;
        drawTextBlob(blob: TextBlob, x: number, y: number, paint: Paint): void;
        drawVertices(verts: Vertices, mode: EmbindEnumEntity, paint: Paint): void;
        getDeviceClipBounds(output?: IRect): IRect;
        getLocalToDevice(): Matrix4x4;
        getSaveCount(): number;
        getTotalMatrix(): number[];
        isAliasOf(other: any): boolean;
        isDeleted(): boolean;
        makeSurface(info: ImageInfo): Surface | null;
        quickReject(rect: InputRect): boolean;
        readPixels(
            srcX: number,
            srcY: number,
            imageInfo: ImageInfo,
            dest?: MallocObj,
            bytesPerRow?: number,
        ): Uint8Array<ArrayBufferLike> | Float32Array<ArrayBufferLike> | null;
        restore(): void;
        restoreToCount(saveCount: number): void;
        rotate(rot: number, rx: number, ry: number): void;
        save(): number;
        saveLayer(
            paint?: Paint,
            bounds?: InputRect | null,
            backdrop?: ImageFilter | null,
            flags?: number,
            backdropFilterTileMode?: EmbindEnumEntity,
        ): number;
        scale(sx: number, sy: number): void;
        skew(sx: number, sy: number): void;
        translate(dx: number, dy: number): void;
        writePixels(
            pixels: number[] | Uint8Array<ArrayBufferLike>,
            srcWidth: number,
            srcHeight: number,
            destX: number,
            destY: number,
            alphaType?: EmbindEnumEntity,
            colorType?: EmbindEnumEntity,
            colorSpace?: ColorSpace,
        ): boolean;
    }

    Hierarchy (View Summary)

    Index

    Properties

    _type

    Methods

    clear clipPath clipRect clipRRect concat delete deleteLater drawArc drawAtlas drawCircle drawColor drawColorComponents drawColorInt drawDRRect drawGlyphs drawGlyphsRSXform drawImage drawImageCubic drawImageNine drawImageOptions drawImageRect drawImageRectCubic drawImageRectOptions drawLine drawOval drawPaint drawParagraph drawPatch drawPath drawPicture drawPoints drawRect drawRect4f drawRRect drawShadow drawText drawTextBlob drawVertices getDeviceClipBounds getLocalToDevice getSaveCount getTotalMatrix isAliasOf isDeleted makeSurface quickReject readPixels restore restoreToCount rotate save saveLayer scale skew translate writePixels

    Properties

    _type

    _type: "Canvas"

    Methods

    • Fills the current clip with the given color using Src BlendMode. This has the effect of replacing all pixels contained by clip with color.

      Parameters

      Returns void

    • Replaces clip with the intersection or difference of the current clip and path, with an aliased or anti-aliased clip edge.

      Parameters

      Returns void

    • Draws arc using clip, Matrix, and Paint paint.

      Arc is part of oval bounded by oval, sweeping from startAngle to startAngle plus sweepAngle. startAngle and sweepAngle are in degrees.

      Parameters

      • oval: InputRect

        bounds of oval containing arc to draw

      • startAngle: number

        angle in degrees where arc begins

      • sweepAngle: number

        sweep angle in degrees; positive is clockwise

      • useCenter: boolean

        if true, include the center of the oval

      • paint: Paint

      Returns void

    • Draws a circle at (cx, cy) with the given radius.

      Parameters

      • cx: number
      • cy: number
      • radius: number
      • paint: Paint

      Returns void

    • Fills clip with the given color.

      Parameters

      • r: number

        red value (typically from 0 to 1.0).

      • g: number

        green value (typically from 0 to 1.0).

      • b: number

        blue value (typically from 0 to 1.0).

      • a: number

        alpha value, range 0 to 1.0 (1.0 is opaque).

      • OptionalblendMode: EmbindEnumEntity

        defaults to SrcOver.

      Returns void

    • Draws a run of glyphs, at corresponding positions, in a given font.

      Parameters

      • glyphs: InputGlyphIDArray

        the array of glyph IDs (Uint16TypedArray)

      • positions: InputFlattenedPointArray

        the array of x,y floats to position each glyph

      • x: number

        x-coordinate of the origin of the entire run

      • y: number

        y-coordinate of the origin of the entire run

      • font: Font

        the font that contains the glyphs

      • paint: Paint

      Returns void

    • Draws glyphs at positions defined by RSXforms (rotation + scale + translate). Each glyph i is placed at xforms[i], which encodes [scos, ssin, tx, ty]. Use CanvasKit.RSXFormMake(scos, ssin, tx, ty) to build individual entries.

      Parameters

      Returns void

    • Draws the given image with its top-left corner at (left, top) using the current clip, the current matrix, and optionally-provided paint.

      Parameters

      • img: Image
      • left: number
      • top: number
      • Optionalpaint: Paint | null

      Returns void

    • Draws the given image with its top-left corner at (left, top) using the current clip, the current matrix. It will use the cubic sampling options B and C if necessary.

      Parameters

      • img: Image
      • left: number
      • top: number
      • B: number

        See CubicResampler in SkSamplingOptions.h for more information

      • C: number

        See CubicResampler in SkSamplingOptions.h for more information

      • Optionalpaint: Paint | null

      Returns void

    • Draws the given image with its top-left corner at (left, top) using the current clip, the current matrix. It will use the provided sampling options if necessary.

      Parameters

      • img: Image
      • left: number
      • top: number
      • fm: EmbindEnumEntity

        The filter mode.

      • mm: EmbindEnumEntity

        The mipmap mode. Note: for settings other than None, the image must have mipmaps calculated with makeCopyWithDefaultMipmaps;

      • Optionalpaint: Paint | null

      Returns void

    • Draws sub-rectangle src from provided image, scaled and translated to fill dst rectangle.

      Parameters

      Returns void

    • Draws sub-rectangle src from provided image, scaled and translated to fill dst rectangle. It will use the cubic sampling options B and C if necessary.

      Parameters

      • img: Image
      • src: InputRect
      • dest: InputRect
      • B: number

        See CubicResampler in SkSamplingOptions.h for more information

      • C: number

        See CubicResampler in SkSamplingOptions.h for more information

      • Optionalpaint: Paint | null

      Returns void

    • Draws line segment from (x0, y0) to (x1, y1) using the current clip, current matrix, and the provided paint.

      Parameters

      • x0: number
      • y0: number
      • x1: number
      • y1: number
      • paint: Paint

      Returns void

    • Draws the given Paragraph at the provided coordinates. Requires the Paragraph code to be compiled in.

      Parameters

      Returns void

    • Draws the given path using the current clip, current matrix, and the provided paint.

      Parameters

      Returns void

    • Draws the given picture using the current clip, current matrix, and the provided paint.

      Parameters

      Returns void

    • Draws the given rectangle using the current clip, current matrix, and the provided paint.

      Parameters

      • left: number
      • top: number
      • right: number
      • bottom: number
      • paint: Paint

      Returns void

    • Draw an offset spot shadow and outlining ambient shadow for the given path using a disc light. See SkShadowUtils.h for more details

      Parameters

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

      • ambientColor: InputColor

        The color of the ambient shadow.

      • spotColor: InputColor

        The color of the spot shadow.

      • flags: number

        See SkShadowUtils.h; 0 means use default options.

      Returns void

    • Draw the given text at the location (x, y) using the provided paint and font. The text will be drawn as is; no shaping, left-to-right, etc.

      Parameters

      • str: string
      • x: number
      • y: number
      • paint: Paint
      • font: Font

      Returns void

    • Draws the given TextBlob at (x, y) using the current clip, current matrix, and the provided paint. Reminder that the fonts used to draw TextBlob are part of the blob.

      Parameters

      Returns void

    • Draws the given vertices (a triangle mesh) using the current clip, current matrix, and the provided paint. If paint contains an Shader and vertices does not contain texCoords, the shader is mapped using the vertices' positions. If vertices colors are defined in vertices, and Paint paint contains Shader, BlendMode mode combines vertices colors with Shader.

      Parameters

      Returns void

    • Returns the bounds of clip, unaffected by the canvas's matrix. If the clip is empty, all four integers in the returned rectangle will equal zero.

      Parameters

      • Optionaloutput: IRect

        if provided, the results will be copied into the given array instead of allocating a new one.

      Returns IRect

    • Returns the number of saved states, each containing: Matrix and clip. Equals the number of save() calls less the number of restore() calls plus one. The save count of a new canvas is one.

      Returns number

    • Legacy version of getLocalToDevice(), which strips away any Z information, and just returns a 3x3 version.

      Returns number[]

    • Returns true if the given rect, transformed by the current canvas transform, can be quickly determined to fall entirely outside the clip.

      Parameters

      Returns boolean

    • Returns a TypedArray containing the pixels reading starting at (srcX, srcY) and does not exceed the size indicated by imageInfo. See SkCanvas.h for more on the caveats.

      If dest is not provided, we allocate memory equal to the provided height * the provided bytesPerRow to fill the data with.

      This is generally a very expensive call for the GPU backend.

      Parameters

      • srcX: number
      • srcY: number
      • imageInfo: ImageInfo

        describes the destination format of the pixels.

      • Optionaldest: MallocObj

        If provided, the pixels will be copied into the allocated buffer allowing access to the pixels without allocating a new TypedArray.

      • OptionalbytesPerRow: number

        number of bytes per row. Must be provided if dest is set. This depends on destination ColorType. For example, it must be at least 4 * width for the 8888 color type.

      Returns Uint8Array<ArrayBufferLike> | Float32Array<ArrayBufferLike> | null

      a TypedArray appropriate for the specified ColorType. Note that 16 bit floats are not supported in JS, so that colorType corresponds to raw bytes Uint8Array.

    • Removes changes to the current matrix and clip since Canvas state was last saved. The state is removed from the stack. Does nothing if the stack is empty.

      Returns void

    • Restores state to a previous stack value.

      Parameters

      • saveCount: number

      Returns void

    • Rotates the current matrix by the number of degrees.

      Parameters

      • rot: number

        angle of rotation in degrees.

      • rx: number
      • ry: number

      Returns void

    • Saves the current matrix and clip and returns current height of the stack.

      Returns number

    • Saves Matrix and clip, and allocates a SkBitmap for subsequent drawing. Calling restore() discards changes to Matrix and clip, and draws the SkBitmap. It returns the height of the stack. See Canvas.h for more.

      Parameters

      Returns number

    • Scales the current matrix by sx on the x-axis and sy on the y-axis.

      Parameters

      • sx: number
      • sy: number

      Returns void

    • Skews Matrix by sx on the x-axis and sy on the y-axis. A positive value of sx skews the drawing right as y-axis values increase; a positive value of sy skews the drawing down as x-axis values increase.

      Parameters

      • sx: number
      • sy: number

      Returns void

    • Translates Matrix by dx along the x-axis and dy along the y-axis.

      Parameters

      • dx: number
      • dy: number

      Returns void

    • Writes the given rectangle of pixels to the provided coordinates. The source pixels will be converted to the canvas's alphaType and colorType if they do not match.

      Parameters

      • pixels: number[] | Uint8Array<ArrayBufferLike>
      • srcWidth: number
      • srcHeight: number
      • destX: number
      • destY: number
      • OptionalalphaType: EmbindEnumEntity

        defaults to Unpremul

      • OptionalcolorType: EmbindEnumEntity

        defaults to RGBA_8888

      • OptionalcolorSpace: ColorSpace

        defaults to SRGB

      Returns boolean

    Settings

    Member Visibility

    On This Page

    Properties
    Methods