Module

x/canvas/mod.ts

Canvas API for Deno, ported from canvaskit-wasm (Skia).
Go to Latest
interface CanvasKit
import { type CanvasKit } from "https://deno.land/x/canvas@v1.0.0/mod.ts";

Properties

readonly
ImageData: ImageDataConstructor
readonly
ParagraphStyle: ParagraphStyleConstructor
readonly
ShapedText: ShapedTextConstructor
readonly
SkContourMeasureIter: SkContourMeasureIterConstructor
readonly
SkFont: SkFontConstructor
readonly
SkPaint: DefaultConstructor<SkPaint>
readonly
SkPictureRecorder: DefaultConstructor<SkPictureRecorder>
readonly
TextStyle: TextStyleConstructor
readonly
ParagraphBuilder: ParagraphBuilderFactory
readonly
SkColorFilter: SkColorFilterFactory
readonly
SkFontMgr: SkFontMgrFactory
readonly
SkImageFilter: SkImageFilterFactory
readonly
SkMaskFilter: SkMaskFilterFactory
readonly
SkPathEffect: SkPathEffectFactory
readonly
SkRuntimeEffect: SkRuntimeEffectFactory
readonly
SkShader: SkShaderFactory
readonly
SkTextBlob: SkTextBlobFactory
readonly
TypefaceFontProvider: TypefaceFontProviderFactory
readonly
SkColorMatrix: ColorMatrixHelpers
readonly
SkMatrix: Matrix3x3Helpers
readonly
SkM44: Matrix4x4Helpers
readonly
SkVector: VectorHelpers
readonly
AlphaType: AlphaTypeEnumValues
readonly
BlendMode: BlendModeEnumValues
readonly
BlurStyle: BlurStyleEnumValues
readonly
ClipOp: ClipOpEnumValues
readonly
ColorType: ColorTypeEnumValues
readonly
FillType: FillTypeEnumValues
readonly
FilterQuality: FilterQualityEnumValues
readonly
FontEdging: FontEdgingEnumValues
readonly
FontHinting: FontHintingEnumValues
readonly
ImageFormat: ImageFormatEnumValues
readonly
PaintStyle: PaintStyleEnumValues
readonly
PathOp: PathOpEnumValues
readonly
PointMode: PointModeEnumValues
readonly
SkColorSpace: ColorSpaceEnumValues
readonly
StrokeCap: StrokeCapEnumValues
readonly
StrokeJoin: StrokeJoinEnumValues
readonly
TileMode: TileModeEnumValues
readonly
VertexMode: VertexModeEnumValues
readonly
TRANSPARENT: SkColor
readonly
BLACK: SkColor
readonly
WHITE: SkColor
readonly
RED: SkColor
readonly
GREEN: SkColor
readonly
BLUE: SkColor
readonly
YELLOW: SkColor
readonly
CYAN: SkColor
readonly
MAGENTA: SkColor
readonly
MOVE_VERB: number
readonly
LINE_VERB: number
readonly
QUAD_VERB: number
readonly
CONIC_VERB: number
readonly
CUBIC_VERB: number
readonly
CLOSE_VERB: number
readonly
SaveLayerInitWithPrevious: SaveLayerFlag
readonly
SaveLayerF16ColorType: SaveLayerFlag
readonly
gpu: boolean
readonly
Affinity: AffinityEnumValues
readonly
DecorationStyle: DecorationStyleEnumValues
readonly
FontSlant: FontSlantEnumValues
readonly
FontWeight: FontWeightEnumValues
readonly
FontWidth: FontWidthEnumValues
readonly
PlaceholderAlignment: PlaceholderAlignmentEnumValues
readonly
RectHeightStyle: RectHeightStyleEnumValues
readonly
RectWidthStyle: RectWidthStyleEnumValues
readonly
TextAlign: TextAlignEnumValues
readonly
TextBaseline: TextBaselineEnumValues
readonly
TextDirection: TextDirectionEnumValues
readonly
NoDecoration: number
readonly
UnderlineDecoration: number
readonly
OverlineDecoration: number
readonly
LineThroughDecoration: number

Methods

Color(
r: number,
g: number,
b: number,
a?: number,
): SkColor

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().

Color4f(
r: number,
g: number,
b: number,
a?: number,
): SkColor

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

ColorAsInt(
r: number,
g: number,
b: number,
a?: number,
): SkColorInt

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.

getColorComponents(c: SkColor): number[]

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 SkColor is 4 floats.

parseColorString(color: string, colorMap?: object): SkColor

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.

multiplyByAlpha(c: SkColor, alpha: number): SkColor

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

computeTonalColors(colors: TonalColorsInput): TonalColorsOutput

Computes color values for one-pass tonal alpha. Note, if malloced colors are passed in, the memory pointed at by the MallocObj will be overwritten with the computed tonal colors (and thus the return val can be ignored).

LTRBRect(
left: number,
top: number,
right: number,
bottom: number,
): SkRect

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

XYWHRect(
x: number,
y: number,
width: number,
height: number,
): SkRect

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

LTRBiRect(
left: number,
top: number,
right: number,
bottom: number,
): SkIRect

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

XYWHiRect(
x: number,
y: number,
width: number,
height: number,
): SkIRect

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

RRectXY(
rect: InputRect,
rx: number,
ry: number,
): SkRRect

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

Malloc(typedArray: TypedArrayConstructor, len: number): MallocObj

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.SkColorFilter.MakeMatrix(ta); // mObj could also be used.

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

MallocGlyphIDs(len: number): 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.

Free(m: MallocObj): void

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

MakeCanvasSurface(canvas: HTMLCanvasElement | string): SkSurface | null

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.

MakeSWCanvasSurface(canvas: HTMLCanvasElement | string): SkSurface | null

Creates a CPU backed (aka raster) surface.

MakeWebGLCanvasSurface(
canvas: HTMLCanvasElement | string,
colorSpace?: ColorSpace,
opts?: WebGLOptions,
): SkSurface | null

A helper for creating a WebGL backed (aka GPU) surface and falling back to a CPU surface if the GPU one cannot be created. This works for both WebGL 1 and WebGL 2.

MakeSurface(width: number, height: number): SkSurface | null

Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul alphaType and 8888 color type. The pixels belonging to this surface will be in memory and not visible.

GetWebGLContext(canvas: HTMLCanvasElement, opts?: WebGLOptions): WebGLContextHandle

Creates a WebGL Context from the given canvas with the given options. If options are omitted, sensible defaults will be used.

MakeGrContext(ctx: WebGLContextHandle): GrContext

Creates a GrContext from the given WebGL Context.

MakeOnScreenGLSurface(
ctx: GrContext,
width: number,
height: number,
colorSpace: ColorSpace,
): SkSurface | null

Creates a Surface that will be drawn to the given GrContext (and show up on screen).

MakeRenderTarget(
ctx: GrContext,
width: number,
height: number,
): SkSurface | null

Returns a (non-visible) SkSurface on the GPU. It has the given dimensions and uses 8888 color depth and premultiplied alpha. See SkSurface.h for more details.

MakeRenderTarget(ctx: GrContext, info: SkImageInfo): SkSurface | null

Returns a (non-visible) SkSurface on the GPU. It has the settings provided by image info. See SkSurface.h for more details.

currentContext(): WebGLContextHandle

Returns the current WebGLContext that the wasm code is configured to draw to. It is recommended to capture this value after creating a new WebGL surface if there are multiple surfaces on the screen.

setCurrentContext(ctx: WebGLContextHandle): void

Sets the WebGLContext that the wasm code will draw to.

When a WebGL call is made on the C++ side, it is routed to the JS side to target a specific WebGL context. WebGL calls are methods on a WebGL context, so CanvasKit needs to know which context to send the calls to.

getDecodeCacheLimitBytes(): number

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

getDecodeCacheUsedBytes(): number

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

setDecodeCacheLimitBytes(size: number): void

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

MakeAnimatedImageFromEncoded(bytes: Uint8Array | ArrayBuffer): SkAnimatedImage | null

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.

MakeCanvas(width: number, height: number): EmulatedCanvas2D

Returns an emulated Canvas2D of the given size.

MakeImageFromEncoded(bytes: Uint8Array | ArrayBuffer): SkImage | null

Return an SkImage 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 SkImage.h for more details.

MakeImageFromCanvasImageSource(src: CanvasImageSource): SkImage

Returns an SkImage 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 SkImage.

MakePathFromOp(
one: SkPath,
two: SkPath,
op: PathOp,
): SkPath | null

Creates a new path by combining the given paths according to op. If this fails, null will be returned instead.

MakePathFromSVGString(str: string): SkPath | null

Creates a new path from the provided SVG string. If this fails, null will be returned instead.

MakeSkPicture(bytes: Uint8Array | ArrayBuffer): SkPicture | null

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

MakeSkVertices(
mode: VertexMode,
positions: number[][],
textureCoordinates?: number[][] | null,
colors?: Float32Array | ColorIntArray | null,
indices?: number[] | null,
isVolatile?: boolean,
): SkVertices

Returns an SkVertices based on the given positions and optional parameters. See SkVertices.h (especially the Builder) for more details.

MakeAnimation(json: string): SkottieAnimation

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

MakeManagedAnimation(
json: string,
assets?: Record<string, ArrayBuffer>,
filterPrefix?: string,
): ManagedSkottieAnimation

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

MakeParticles(json: string, assets?: Record<string, ArrayBuffer>): Particles

Returns a Particles effect built from the provided json string and assets. Requires that Particles be compiled into CanvasKit

getSkDataBytes(data: SkData): Uint8Array

Returns the underlying data from SkData as a Uint8Array.

import CanvasKit
import { CanvasKit } from "https://deno.land/x/canvas@v1.0.0/mod.ts";