Skip to main content
Deno 2 is finally here 🎉️
Learn more
Module

x/canvas/src/canvas.ts

Canvas API for Deno, ported from canvaskit-wasm (Skia).
Go to Latest
import * as canvas from "https://deno.land/x/canvas@v1.3.0/src/canvas.ts";

Interfaces

See SkAnimatedImage.h for more information on this class.

This represents a subset of an animation's duration.

This object maintains a single audio layer during skottie playback

See SkCanvas.h for more information on this class.

An opaque object describing a gradient. It is returned by the methods CanvasRenderingContext2D.createLinearGradient() or CanvasRenderingContext2D.createRadialGradient().

An opaque object describing a pattern, based on an image, a canvas, or a video, created by the CanvasRenderingContext2D.createPattern() method.

The CanvasRenderingContext2D export interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for drawing shapes, text, images, and other objects.

See SkColorFilter.h for more.

Named color property.

The currently supported color spaces. These are all singleton values.

Represents the set of enum values.

Represents a single member of an enum.

CanvasKit is built with Emscripten and Embind. Embind adds the following methods to all objects that are exposed with it.

Specifies sampling using filter and mipmap options

See SkFont.h for more on this class.

Input to ShapeText(..., FontBlock[], ...);

See SkFont.h for more.

See SkFontMgr.h for more details

Information for a run of shaped text. See Paragraph.getShapedLines()

See GrDirectContext.h for more on this class.

See SkImage.h for more information on this class.

A constructor for making an ImageData that is compatible with the Canvas2D emulation code.

See effects/ImageFilters.h for more.

See Metrics.h for more on this struct.

This object is a wrapper around a pointer to some memory on the WASM heap. The type of the pointer was determined at creation time.

See SkMaskFilter.h for more details.

TODO(kjlubick) Make this API return Float32Arrays

See SkM44.h for more details.

Named opacity property.

See SkPaint.h for more information on this class.

See Paragraph.h for more information on this class. This is only available if Paragraph has been compiled in.

See SkParticleEffect.h for more details.

See SkPath.h for more information on this class.

Contains the ways to create an Path.

See SkPathEffect.h for more details.

See SkRuntimeEffect.h for more details.

See RuntimeEffect.h for more details.

For more information, see SkShaders.h.

Information for a paragraph of text. See Paragraph.getShapedLines()

See SkPicture.h for more information on this class.

Mapping of sound names (strings) to AudioPlayers

Options used for Path.stroke(). If an option is omitted, a sensible default will be used.

See SkTextBlob.h for more details.

Named text property.

Text property value.

See SkTypeface.h for more on this class. The objects are opaque.

Functions for manipulating vectors. It is Loosely based off of SkV3 in SkM44.h but Skia also has SkVec2 and Skv4. This combines them and works on vectors of any length.

See SkVertices.h for more on this class.

Options for configuring a WebGL context. If an option is omitted, a sensible default will be used. These are defined by the WebGL standards.

Type Aliases

An Color is represented by 4 floats, typically with values between 0 and 1.0. In order, the floats correspond to red, green, blue, alpha.

See SkColorFilter.h for more on this class. The objects are opaque.

An ColorMatrix is a 4x4 color matrix that transforms the 4 color channels with a 1x4 matrix that post-translates those 4 channels. For example, the following is the layout with the scale (S) and post-transform (PT) items indicated. RS, 0, 0, 0 | RPT 0, GS, 0, 0 | GPT 0, 0, BS, 0 | BPT 0, 0, 0, AS | APT

Part of the Canvas2D emulation code

FlattenedPointArray represents n points by 2*n float values. In order, the values should be the x, y for each point.

FlattenedRectangleArray represents n rectangles by 4*n float values. In order, the values should be the top, left, right, bottom point for each rectangle.

See ImageFilter.h for more on this class. The objects are opaque.

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as colors. Length 4.

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as color matrices. Length 20.

A command is a verb and then any arguments needed to fulfill that path verb. InputCommands is a flattened structure of one or more of these. Examples: [CanvasKit.MOVE_VERB, 0, 10, CanvasKit.QUAD_VERB, 20, 50, 45, 60, CanvasKit.LINE_VERB, 30, 40]

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as flattened points. Length 2 * n for n points.

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as flattened rectangles. Length 4 * n for n rectangles.

This represents n RSXforms by 4*n float values. In order, the values should be scos, ssin, tx, ty for each RSXForm. See RSXForm.h for more details.

Some APIs accept a flattened array of colors in one of two ways - groups of 4 float values for r, g, b, a or just integers that have 8 bits for each these. CanvasKit will detect which one it is and act accordingly. Additionally, this can be an array of Float32Arrays of length 4 (e.g. Color). This is convenient for things like gradients when matching up colors to stops.

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as glyph IDs. Length n for n glyph IDs.

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as (int) rectangles. Length 4.

CanvasKit APIs accept all of these matrix types. Under the hood, we generally use 4x4 matrices.

CanvasKit APIs accept a Float32Array or a normal array (of length 2) as a Point.

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as rectangles. Length 4.

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as rectangles with rounded corners. Length 12.

CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as a vector of 3 floats. For example, this is the x, y, z coordinates.

An IRect is represented by 4 ints. In order, the ints correspond to left, top, right, bottom. See Rect.h for more

See SkMaskFilter.h for more on this class. The objects are opaque.

See SkPathEffect.h for more on this class. The objects are opaque.

An Point is represented by 2 floats: (x, y).

A PosTan is a Float32Array of length 4, representing a position and a tangent vector. In order, the values are [px, py, tx, ty].

An Rect is represented by 4 floats. In order, the floats correspond to left, top, right, bottom. See Rect.h for more

An RRect (rectangle with rounded corners) is represented by 12 floats. In order, the floats correspond to left, top, right, bottom and then in pairs, the radiusX, radiusY for upper-left, upper-right, lower-right, lower-left. See RRect.h for more.

See SkShader.h for more on this class. The objects are opaque.

See SkTextBlob.h for more on this class. The objects are opaque.

These are the types that webGL's texImage2D supports as a way to get data from as a texture.

Vector3 represents an x, y, z coordinate or vector. It has length 3.

VectorN represents a vector of length n.

VerbList holds verb constants like CanvasKit.MOVE_VERB, CanvasKit.CUBIC_VERB.

WeightList holds weights for conics when making paths.