Skip to content

CanvasAPI

Types

canvasDirection

type canvasDirection =
| @as("inherit") Inherit
| @as("ltr") Ltr
| @as("rtl") Rtl

canvasFillRule

type canvasFillRule =
| @as("evenodd") Evenodd
| @as("nonzero") Nonzero

canvasFontKerning

type canvasFontKerning =
| @as("auto") Auto
| @as("none") None
| @as("normal") Normal

canvasFontStretch

type canvasFontStretch =
| @as("condensed") Condensed
| @as("expanded") Expanded
| @as("extra-condensed") ExtraCondensed
| @as("extra-expanded") ExtraExpanded
| @as("normal") Normal
| @as("semi-condensed") SemiCondensed
| @as("semi-expanded") SemiExpanded
| @as("ultra-condensed") UltraCondensed
| @as("ultra-expanded") UltraExpanded

canvasFontVariantCaps

type canvasFontVariantCaps =
| @as("all-petite-caps") AllPetiteCaps
| @as("all-small-caps") AllSmallCaps
| @as("normal") Normal
| @as("petite-caps") PetiteCaps
| @as("small-caps") SmallCaps
| @as("titling-caps") TitlingCaps
| @as("unicase") Unicase

canvasGradient

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

type canvasGradient = {}

Module

There are methods and helpers defined in CanvasGradient .

canvasLineCap

type canvasLineCap =
| @as("butt") Butt
| @as("round") Round
| @as("square") Square

canvasLineJoin

type canvasLineJoin =
| @as("bevel") Bevel
| @as("miter") Miter
| @as("round") Round

canvasPattern

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

type canvasPattern = {}

Module

There are methods and helpers defined in CanvasPattern .

canvasRenderingContext2DSettings

type canvasRenderingContext2DSettings = {
mutable alpha?: bool,
mutable desynchronized?: bool,
mutable colorSpace?: predefinedColorSpace,
mutable willReadFrequently?: bool,
}

Record fields

alpha
option< bool >
desynchronized
option< bool >
colorSpace
willReadFrequently
option< bool >

canvasTextAlign

type canvasTextAlign =
| @as("center") Center
| @as("end") End
| @as("left") Left
| @as("right") Right
| @as("start") Start

canvasTextBaseline

type canvasTextBaseline =
| @as("alphabetic") Alphabetic
| @as("bottom") Bottom
| @as("hanging") Hanging
| @as("ideographic") Ideographic
| @as("middle") Middle
| @as("top") Top

canvasTextRendering

type canvasTextRendering =
| @as("auto") Auto
| @as("geometricPrecision") GeometricPrecision
| @as("optimizeLegibility") OptimizeLegibility
| @as("optimizeSpeed") OptimizeSpeed

globalCompositeOperation

type globalCompositeOperation =
| @as("color") Color
| @as("color-burn") ColorBurn
| @as("color-dodge") ColorDodge
| @as("copy") Copy
| @as("darken") Darken
| @as("destination-atop") DestinationAtop
| @as("destination-in") DestinationIn
| @as("destination-out") DestinationOut
| @as("destination-over") DestinationOver
| @as("difference") Difference
| @as("exclusion") Exclusion
| @as("hard-light") HardLight
| @as("hue") Hue
| @as("lighten") Lighten
| @as("lighter") Lighter
| @as("luminosity") Luminosity
| @as("multiply") Multiply
| @as("overlay") Overlay
| @as("saturation") Saturation
| @as("screen") Screen
| @as("soft-light") SoftLight
| @as("source-atop") SourceAtop
| @as("source-in") SourceIn
| @as("source-out") SourceOut
| @as("source-over") SourceOver
| @as("xor") Xor

imageBitmap

type imageBitmap = {width: int, height: int}

Record fields

width
int

Returns the intrinsic width of the image, in CSS pixels. Read more on MDN

height
int

Returns the intrinsic height of the image, in CSS pixels. Read more on MDN

Module

There are methods and helpers defined in ImageBitmap .

imageBitmapRenderingContext

type imageBitmapRenderingContext = {canvas: unknown}

Record fields

canvas
unknown

Returns the canvas element that the context is bound to. Read more on MDN

Module

There are methods and helpers defined in ImageBitmapRenderingContext .

imageBitmapRenderingContextSettings

type imageBitmapRenderingContextSettings = {
mutable alpha?: bool,
}

Record fields

alpha
option< bool >

imageEncodeOptions

type imageEncodeOptions = {
mutable type_?: string,
mutable quality?: float,
}

Record fields

type_
option< string >
quality
option< float >

imageSmoothingQuality

type imageSmoothingQuality =
| @as("high") High
| @as("low") Low
| @as("medium") Medium

offscreenCanvas

type offscreenCanvas = {
mutable width: int,
mutable height: int,
}

Record fields

width
int

These attributes return the dimensions of the OffscreenCanvas object's bitmap.

They can be set, to replace the bitmap with a new, transparent black bitmap of the specified dimensions (effectively resizing it). Read more on MDN

height
int

These attributes return the dimensions of the OffscreenCanvas object's bitmap.

They can be set, to replace the bitmap with a new, transparent black bitmap of the specified dimensions (effectively resizing it). Read more on MDN

Module

There are methods and helpers defined in OffscreenCanvas .

offscreenCanvasRenderingContext2D

type offscreenCanvasRenderingContext2D = {
canvas: offscreenCanvas,
mutable globalAlpha: float,
mutable globalCompositeOperation: globalCompositeOperation,
mutable imageSmoothingEnabled: bool,
mutable imageSmoothingQuality: imageSmoothingQuality,
mutable strokeStyle: unknown,
mutable fillStyle: unknown,
mutable shadowOffsetX: float,
mutable shadowOffsetY: float,
mutable shadowBlur: float,
mutable shadowColor: string,
mutable filter: string,
mutable lineWidth: float,
mutable lineCap: canvasLineCap,
mutable lineJoin: canvasLineJoin,
mutable miterLimit: float,
mutable lineDashOffset: float,
mutable font: string,
mutable textAlign: canvasTextAlign,
mutable textBaseline: canvasTextBaseline,
mutable direction: canvasDirection,
mutable letterSpacing: string,
mutable fontKerning: canvasFontKerning,
mutable fontStretch: canvasFontStretch,
mutable fontVariantCaps: canvasFontVariantCaps,
mutable textRendering: canvasTextRendering,
mutable wordSpacing: string,
}

Record fields

globalAlpha
float
globalCompositeOperation
imageSmoothingEnabled
bool
imageSmoothingQuality
strokeStyle
unknown
fillStyle
unknown
shadowOffsetX
float
shadowOffsetY
float
shadowBlur
float
shadowColor
string
filter
string
lineWidth
float
miterLimit
float
lineDashOffset
float
font
string
letterSpacing
string
wordSpacing
string

offscreenRenderingContext

type offscreenRenderingContext = WebAPI.Prelude.any

offscreenRenderingContextId

type offscreenRenderingContextId =
| @as("2d") V2d
| @as("bitmaprenderer") Bitmaprenderer
| @as("webgl") Webgl
| @as("webgl2") Webgl2
| @as("webgpu") Webgpu

path2D

This Canvas 2D API interface is used to declare a path that can then be used on a CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired. See Path2D on MDN

type path2D = {}

Module

There are methods and helpers defined in Path2D .

predefinedColorSpace

type predefinedColorSpace =
| @as("display-p3") DisplayP3
| @as("srgb") Srgb

textMetrics

The dimensions of a piece of text in the canvas, as created by the CanvasRenderingContext2D.measureText() method. See TextMetrics on MDN

type textMetrics = {
width: float,
actualBoundingBoxLeft: float,
actualBoundingBoxRight: float,
fontBoundingBoxAscent: float,
fontBoundingBoxDescent: float,
actualBoundingBoxAscent: float,
actualBoundingBoxDescent: float,
emHeightAscent: float,
emHeightDescent: float,
hangingBaseline: float,
alphabeticBaseline: float,
ideographicBaseline: float,
}

Record fields

width
float

Returns the measurement described below. Read more on MDN

actualBoundingBoxLeft
float

Returns the measurement described below. Read more on MDN

actualBoundingBoxRight
float

Returns the measurement described below. Read more on MDN

fontBoundingBoxAscent
float

Returns the measurement described below. Read more on MDN

fontBoundingBoxDescent
float

Returns the measurement described below. Read more on MDN

actualBoundingBoxAscent
float

Returns the measurement described below. Read more on MDN

actualBoundingBoxDescent
float

Returns the measurement described below. Read more on MDN

emHeightAscent
float

Returns the measurement described below. Read more on MDN

emHeightDescent
float

Returns the measurement described below. Read more on MDN

hangingBaseline
float

Returns the measurement described below. Read more on MDN

alphabeticBaseline
float

Returns the measurement described below. Read more on MDN

ideographicBaseline
float

Returns the measurement described below. Read more on MDN

webGL2RenderingContext

type webGL2RenderingContext = {
canvas: unknown,
drawingBufferWidth: float,
drawingBufferHeight: float,
mutable drawingBufferColorSpace: predefinedColorSpace,
mutable unpackColorSpace: predefinedColorSpace,
}

Record fields

canvas
unknown
drawingBufferWidth
float
drawingBufferHeight
float
drawingBufferColorSpace

webGLContextAttributes

type webGLContextAttributes = {
mutable alpha?: bool,
mutable depth?: bool,
mutable stencil?: bool,
mutable antialias?: bool,
mutable premultipliedAlpha?: bool,
mutable preserveDrawingBuffer?: bool,
mutable powerPreference?: webGLPowerPreference,
mutable failIfMajorPerformanceCaveat?: bool,
mutable desynchronized?: bool,
}

Record fields

alpha
option< bool >
depth
option< bool >
stencil
option< bool >
antialias
option< bool >
premultipliedAlpha
option< bool >
preserveDrawingBuffer
option< bool >
powerPreference
failIfMajorPerformanceCaveat
option< bool >
desynchronized
option< bool >

webGLPowerPreference

type webGLPowerPreference =
| @as("default") Default
| @as("high-performance") HighPerformance
| @as("low-power") LowPower

webGLRenderingContext

Provides an interface to the OpenGL ES 2.0 graphics rendering context for the drawing surface of an HTML <canvas> element. See WebGLRenderingContext on MDN

type webGLRenderingContext = {
canvas: unknown,
drawingBufferWidth: float,
drawingBufferHeight: float,
mutable drawingBufferColorSpace: predefinedColorSpace,
mutable unpackColorSpace: predefinedColorSpace,
}

Record fields

canvas
unknown
drawingBufferWidth
float
drawingBufferHeight
float
drawingBufferColorSpace