canvas

canvas

Version 2.11.2
Published 1 year ago
518 kB
3 dependencies
MIT license

Install

npm i canvas

yarn add canvas

pnpm add canvas

Overview

Canvas graphics API backed by Cairo

Index

Variables

variable cairoVersion

const cairoVersion: string;

Cairo version.

variable freetypeVersion

const freetypeVersion: string;

freetype version.

variable gifVersion

const gifVersion: string;

giflib version, if built with GIF support.

variable jpegVersion

const jpegVersion: string;

jpeglib version, if built with JPEG support.

variable rsvgVersion

const rsvgVersion: string;

rsvg version.

variable version

const version: string;

Library version.

Functions

function createCanvas

createCanvas: (width: number, height: number, type?: 'pdf' | 'svg') => Canvas;

Creates a Canvas instance. This function works in both Node.js and Web browsers, where there is no Canvas constructor.
Parameter type
Optionally specify to create a PDF or SVG canvas. Defaults to an image canvas.

function createImageData

createImageData: {
    (data: Uint8ClampedArray, width: number, height?: number): ImageData;
    (data: Uint16Array, width: number, height?: number): ImageData;
    (width: number, height: number): ImageData;
};

Creates an ImageData instance. This function works in both Node.js and Web browsers.
Parameter data
An array containing the pixel representation of the image.
Parameter height
If omitted, the height is calculated based on the array's size and width.
_Non-standard._ Creates an ImageData instance for an alternative pixel format, such as RGB16_565
Parameter data
An array containing the pixel representation of the image.
Parameter height
If omitted, the height is calculated based on the array's size and width.
Creates an ImageData instance. This function works in both Node.js and Web browsers.

function deregisterAllFonts

deregisterAllFonts: () => void;

Unloads all fonts

function loadImage

loadImage: (src: string | Buffer, options?: any) => Promise<Image>;

Convenience function for loading an image with a Promise interface. This function works in both Node.js and Web browsers; however, the src must be a string in Web browsers (it can only be a Buffer in Node.js).
Parameter src
URL, data: URI or (Node.js only) a local file path or Buffer instance.

function registerFont

registerFont: (
    path: string,
    fontFace: { family: string; weight?: string; style?: string }
) => void;

Registers a font that is not installed as a system font. This must be used before creating Canvas instances.
Parameter path
Path to local font file.
Parameter fontFace
Description of the font face, corresponding to CSS properties used in @font-face rules.

Classes

class Canvas

class Canvas {}

constructor

constructor(width: number, height: number, type?: 'pdf' | 'svg' | 'image');

property height

height: number;

property PNG_ALL_FILTERS

readonly PNG_ALL_FILTERS: number;

Constant used in PNG encoding methods.

property PNG_FILTER_AVG

readonly PNG_FILTER_AVG: number;

Constant used in PNG encoding methods.

property PNG_FILTER_NONE

readonly PNG_FILTER_NONE: number;

Constant used in PNG encoding methods.

property PNG_FILTER_PAETH

readonly PNG_FILTER_PAETH: number;

Constant used in PNG encoding methods.

property PNG_FILTER_SUB

readonly PNG_FILTER_SUB: number;

Constant used in PNG encoding methods.

property PNG_FILTER_UP

readonly PNG_FILTER_UP: number;

Constant used in PNG encoding methods.

property PNG_NO_FILTERS

readonly PNG_NO_FILTERS: number;

Constant used in PNG encoding methods.

property stride

readonly stride: number;

_Non standard._ Getter. The stride used by the canvas.

property type

readonly type: 'pdf' | 'svg' | 'image';

_Non standard._ The type of the canvas.

property width

width: number;

method createJPEGStream

createJPEGStream: (config?: JpegConfig) => JPEGStream;

method createPDFStream

createPDFStream: (config?: PdfConfig) => PDFStream;

method createPNGStream

createPNGStream: (config?: PngConfig) => PNGStream;

method getContext

getContext: (
    contextId: '2d',
    contextAttributes?: NodeCanvasRenderingContext2DSettings
) => CanvasRenderingContext2D;

method toBuffer

toBuffer: {
    (cb: (err: Error | null, result: Buffer) => void): void;
    (
        cb: (err: Error, result: Buffer) => void,
        mimeType: 'image/png',
        config?: PngConfig
    ): void;
    (
        cb: (err: Error, result: Buffer) => void,
        mimeType: 'image/jpeg',
        config?: JpegConfig
    ): void;
    (): Buffer;
    (mimeType: 'image/png', config?: PngConfig): Buffer;
    (mimeType: 'image/jpeg', config?: JpegConfig): Buffer;
    (mimeType: 'application/pdf', config?: PdfConfig): Buffer;
    (mimeType: 'raw'): Buffer;
};

For image canvases, encodes the canvas as a PNG. For PDF canvases, encodes the canvas as a PDF. For SVG canvases, encodes the canvas as an SVG.
Returns the unencoded pixel data, top-to-bottom. On little-endian (most) systems, the array will be ordered BGRA; on big-endian systems, it will be ARGB.

method toDataURL

toDataURL: {
    (): string;
    (mimeType: 'image/png'): string;
    (mimeType: 'image/jpeg', quality?: number): string;
    (cb: (err: Error, result: string) => void): void;
    (mimeType: 'image/png', cb: (err: Error, result: string) => void): void;
    (mimeType: 'image/jpeg', cb: (err: Error, result: string) => void): void;
    (
        mimeType: 'image/jpeg',
        config: JpegConfig,
        cb: (err: Error, result: string) => void
    ): void;
    (
        mimeType: 'image/jpeg',
        quality: number,
        cb: (err: Error, result: string) => void
    ): void;
};

Defaults to PNG image.
_Non-standard._ Defaults to PNG image.
_Non-standard._

class CanvasGradient

class CanvasGradient {}

method addColorStop

addColorStop: (offset: number, color: string) => void;

class CanvasPattern

class CanvasPattern {}

method setTransform

setTransform: (transform?: DOMMatrix) => void;

class CanvasRenderingContext2D

class CanvasRenderingContext2D {}

property antialias

antialias: 'default' | 'gray' | 'none' | 'subpixel';

_Non-standard_. Sets the antialiasing mode.

property canvas

canvas: Canvas;

property currentTransform

currentTransform: DOMMatrix;

Returns or sets a DOMMatrix for the current transformation matrix.

property fillStyle

fillStyle: string | CanvasPattern | CanvasGradient;

property font

font: string;

property globalAlpha

globalAlpha: number;

property globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation;

property imageSmoothingEnabled

imageSmoothingEnabled: boolean;

property lineCap

lineCap: CanvasLineCap;

property lineDashOffset

lineDashOffset: number;

property lineJoin

lineJoin: CanvasLineJoin;

property lineWidth

lineWidth: number;

property miterLimit

miterLimit: number;

property patternQuality

patternQuality: 'fast' | 'good' | 'best' | 'nearest' | 'bilinear';

_Non-standard_. Defaults to 'good'. Affects pattern (gradient, image, etc.) rendering quality.

property quality

quality: 'fast' | 'good' | 'best' | 'nearest' | 'bilinear';

_Non-standard_. Defaults to 'good'. Like patternQuality, but applies to transformations affecting more than just patterns.

property shadowBlur

shadowBlur: number;

property shadowColor

shadowColor: string;

property shadowOffsetX

shadowOffsetX: number;

property shadowOffsetY

shadowOffsetY: number;

property strokeStyle

strokeStyle: string | CanvasPattern | CanvasGradient;

property textAlign

textAlign: CanvasTextAlign;

property textBaseline

textBaseline: CanvasTextBaseline;

property textDrawingMode

textDrawingMode: 'path' | 'glyph';

Defaults to 'path'. The effect depends on the canvas type:
* **Standard (image)** 'glyph' and 'path' both result in rasterized text. Glyph mode is faster than path, but may result in lower-quality text, especially when rotated or translated.
* **PDF** 'glyph' will embed text instead of paths into the PDF. This is faster to encode, faster to open with PDF viewers, yields a smaller file size and makes the text selectable. The subset of the font needed to render the glyphs will be embedded in the PDF. This is usually the mode you want to use with PDF canvases.
* **SVG** glyph does not cause <text> elements to be produced as one might expect ([cairo bug](https://gitlab.freedesktop.org/cairo/cairo/issues/253)). Rather, glyph will create a <defs> section with a <symbol> for each glyph, then those glyphs be reused via <use> elements. 'path' mode creates a <path> element for each text string. glyph mode is faster and yields a smaller file size.
In glyph mode, ctx.strokeText() and ctx.fillText() behave the same (aside from using the stroke and fill style, respectively).

method addPage

addPage: (width?: number, height?: number) => void;

For PDF canvases, adds another page. If width and/or height are omitted, the canvas's initial size is used.

method arc

arc: (
    x: number,
    y: number,
    radius: number,
    startAngle: number,
    endAngle: number,
    counterclockwise?: boolean
) => void;

method arcTo

arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number) => void;

method beginPath

beginPath: () => void;

method bezierCurveTo

bezierCurveTo: (
    cp1x: number,
    cp1y: number,
    cp2x: number,
    cp2y: number,
    x: number,
    y: number
) => void;

method clearRect

clearRect: (x: number, y: number, w: number, h: number) => void;

method clip

clip: (fillRule?: CanvasFillRule) => void;

method closePath

closePath: () => void;

method createImageData

createImageData: {
    (sw: number, sh: number): ImageData;
    (imagedata: ImageData): ImageData;
};

method createLinearGradient

createLinearGradient: (
    x0: number,
    y0: number,
    x1: number,
    y1: number
) => CanvasGradient;

method createPattern

createPattern: (
    image: Canvas | Image,
    repetition: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | '' | null
) => CanvasPattern;

method createRadialGradient

createRadialGradient: (
    x0: number,
    y0: number,
    r0: number,
    x1: number,
    y1: number,
    r1: number
) => CanvasGradient;

method drawImage

drawImage: {
    (image: Canvas | Image, dx: number, dy: number): void;
    (
        image: Canvas | Image,
        dx: number,
        dy: number,
        dw: number,
        dh: number
    ): void;
    (
        image: Canvas | Image,
        sx: number,
        sy: number,
        sw: number,
        sh: number,
        dx: number,
        dy: number,
        dw: number,
        dh: number
    ): void;
};

method ellipse

ellipse: (
    x: number,
    y: number,
    radiusX: number,
    radiusY: number,
    rotation: number,
    startAngle: number,
    endAngle: number,
    counterclockwise?: boolean
) => void;

method fill

fill: (fillRule?: CanvasFillRule) => void;

method fillRect

fillRect: (x: number, y: number, w: number, h: number) => void;

method fillText

fillText: (text: string, x: number, y: number, maxWidth?: number) => void;

method getImageData

getImageData: (sx: number, sy: number, sw: number, sh: number) => ImageData;

method getLineDash

getLineDash: () => number[];

method getTransform

getTransform: () => DOMMatrix;

method isPointInPath

isPointInPath: (x: number, y: number, fillRule?: CanvasFillRule) => boolean;

method lineTo

lineTo: (x: number, y: number) => void;

method measureText

measureText: (text: string) => TextMetrics;

method moveTo

moveTo: (x: number, y: number) => void;

method putImageData

putImageData: {
    (imagedata: ImageData, dx: number, dy: number): void;
    (
        imagedata: ImageData,
        dx: number,
        dy: number,
        dirtyX: number,
        dirtyY: number,
        dirtyWidth: number,
        dirtyHeight: number
    ): void;
};

method quadraticCurveTo

quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number) => void;

method rect

rect: (x: number, y: number, w: number, h: number) => void;

method resetTransform

resetTransform: () => void;

method restore

restore: () => void;

method rotate

rotate: (angle: number) => void;

method roundRect

roundRect: (
    x: number,
    y: number,
    w: number,
    h: number,
    radii?: number | number[]
) => void;

method save

save: () => void;

method scale

scale: (x: number, y: number) => void;

method setLineDash

setLineDash: (segments: number[]) => void;

method setTransform

setTransform: (transform?: DOMMatrix) => void;

method stroke

stroke: () => void;

method strokeRect

strokeRect: (x: number, y: number, w: number, h: number) => void;

method strokeText

strokeText: (text: string, x: number, y: number, maxWidth?: number) => void;

method transform

transform: (
    a: number,
    b: number,
    c: number,
    d: number,
    e: number,
    f: number
) => void;

method translate

translate: (x: number, y: number) => void;

class DOMMatrix

class DOMMatrix {}

constructor

constructor(init: string | number[]);

property a

a: number;

property b

b: number;

property c

c: number;

property d

d: number;

property e

e: number;

property f

f: number;

property is2D

readonly is2D: boolean;

property isIdentity

readonly isIdentity: boolean;

property m11

m11: number;

property m12

m12: number;

property m13

m13: number;

property m14

m14: number;

property m21

m21: number;

property m22

m22: number;

property m23

m23: number;

property m24

m24: number;

property m31

m31: number;

property m32

m32: number;

property m33

m33: number;

property m34

m34: number;

property m41

m41: number;

property m42

m42: number;

property m43

m43: number;

property m44

m44: number;

method flipX

flipX: () => DOMMatrix;

method flipY

flipY: () => DOMMatrix;

method fromFloat32Array

static fromFloat32Array: (a: Float32Array) => DOMMatrix;

method fromFloat64Array

static fromFloat64Array: (a: Float64Array) => DOMMatrix;

method fromMatrix

static fromMatrix: (other: DOMMatrix) => DOMMatrix;

method inverse

inverse: () => DOMMatrix;

method invertSelf

invertSelf: () => DOMMatrix;

method multiply

multiply: (other?: DOMMatrix) => DOMMatrix;

method multiplySelf

multiplySelf: (other?: DOMMatrix) => DOMMatrix;

method preMultiplySelf

preMultiplySelf: (other?: DOMMatrix) => DOMMatrix;

method rotate

rotate: (rotX?: number, rotY?: number, rotZ?: number) => DOMMatrix;

method rotateAxisAngle

rotateAxisAngle: (
    x?: number,
    y?: number,
    z?: number,
    angle?: number
) => DOMMatrix;

method rotateAxisAngleSelf

rotateAxisAngleSelf: (
    x?: number,
    y?: number,
    z?: number,
    angle?: number
) => DOMMatrix;

method rotateFromVector

rotateFromVector: (x?: number, y?: number) => DOMMatrix;

method rotateFromVectorSelf

rotateFromVectorSelf: (x?: number, y?: number) => DOMMatrix;

method rotateSelf

rotateSelf: (rotX?: number, rotY?: number, rotZ?: number) => DOMMatrix;

method scale

scale: (
    scaleX?: number,
    scaleY?: number,
    scaleZ?: number,
    originX?: number,
    originY?: number,
    originZ?: number
) => DOMMatrix;

method scale3d

scale3d: (
    scale?: number,
    originX?: number,
    originY?: number,
    originZ?: number
) => DOMMatrix;

method scale3dSelf

scale3dSelf: (
    scale?: number,
    originX?: number,
    originY?: number,
    originZ?: number
) => DOMMatrix;

method scaleSelf

scaleSelf: (
    scaleX?: number,
    scaleY?: number,
    scaleZ?: number,
    originX?: number,
    originY?: number,
    originZ?: number
) => DOMMatrix;

method setMatrixValue

setMatrixValue: (transformList: string) => DOMMatrix;

method skewX

skewX: (sx?: number) => DOMMatrix;

method skewXSelf

skewXSelf: (sx?: number) => DOMMatrix;

method skewY

skewY: (sy?: number) => DOMMatrix;

method skewYSelf

skewYSelf: (sy?: number) => DOMMatrix;

method toFloat32Array

toFloat32Array: () => Float32Array;

method toFloat64Array

toFloat64Array: () => Float64Array;

method toString

toString: () => string;

method transformPoint

transformPoint: (point?: DOMPoint) => DOMPoint;

method translate

translate: (tx?: number, ty?: number, tz?: number) => DOMMatrix;

method translateSelf

translateSelf: (tx?: number, ty?: number, tz?: number) => DOMMatrix;

class DOMPoint

class DOMPoint {}

property w

w: number;

property x

x: number;

property y

y: number;

property z

z: number;

class Image

class Image {}

property complete

readonly complete: boolean;

Retrieves whether the object is fully loaded.

property dataMode

dataMode: number;

Applies to JPEG images drawn to PDF canvases only. Setting img.dataMode = Image.MODE_MIME or Image.MODE_MIME|Image.MODE_IMAGE enables image MIME data tracking. When MIME data is tracked, PDF canvases can embed JPEGs directly into the output, rather than re-encoding into PNG. This can drastically reduce filesize and speed up rendering.

property height

height: number;

Sets or retrieves the height of the image.

property MODE_IMAGE

static readonly MODE_IMAGE: number;

Track image data

property MODE_MIME

static readonly MODE_MIME: number;

Track MIME data

property naturalHeight

readonly naturalHeight: number;

The original height of the image resource before sizing.

property naturalWidth

readonly naturalWidth: number;

The original width of the image resource before sizing.

property onerror

onerror: (err: Error) => void;

property onload

onload: () => void;

property src

src: any;

The URL, data: URI or local file path of the image to be loaded, or a Buffer instance containing an encoded image.

property width

width: number;

Sets or retrieves the width of the image.

class ImageData

class ImageData {}

constructor

constructor(sw: number, sh: number);

constructor

constructor(data: Uint8ClampedArray, sw: number, sh?: number);

property data

readonly data: Uint8ClampedArray;

property height

readonly height: number;

property width

readonly width: number;

class JPEGStream

class JPEGStream extends Readable {}

This class must not be constructed directly; use canvas.createJPEGStream().

class PDFStream

class PDFStream extends Readable {}

This class must not be constructed directly; use canvas.createPDFStream().

class PNGStream

class PNGStream extends Readable {}

This class must not be constructed directly; use canvas.createPNGStream().

Interfaces

interface JpegConfig

interface JpegConfig {}

property chromaSubsampling

chromaSubsampling?: boolean;

Enables 2x2 chroma subsampling. Defaults to true.

property progressive

progressive?: boolean;

Enables progressive encoding. Defaults to false.

property quality

quality?: number;

Specifies the quality, between 0 and 1. Defaults to 0.75.

interface NodeCanvasRenderingContext2DSettings

interface NodeCanvasRenderingContext2DSettings {}

property alpha

alpha?: boolean;

property pixelFormat

pixelFormat?: 'RGBA32' | 'RGB24' | 'A8' | 'RGB16_565' | 'A1' | 'RGB30';

interface PdfConfig

interface PdfConfig {}

property author

author?: string;

property creationDate

creationDate?: Date;

property creator

creator?: string;

property keywords

keywords?: string;

property modDate

modDate?: Date;

property subject

subject?: string;

property title

title?: string;

interface PngConfig

interface PngConfig {}

property backgroundIndex

backgroundIndex?: number;

_For creating indexed PNGs._ The index of the background color. Defaults to 0.

property compressionLevel

compressionLevel?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;

Specifies the ZLIB compression level. Defaults to 6.

property filters

filters?: number;

Any bitwise combination of PNG_FILTER_NONE, PNG_FILTER_SUB, PNG_FILTER_UP, PNG_FILTER_AVG and PNG_FILTER_PATETH; or one of PNG_ALL_FILTERS or PNG_NO_FILTERS (all are properties of the canvas instance). These specify which filters *may* be used by libpng. During encoding, libpng will select the best filter from this list of allowed filters. Defaults to canvas.PNG_ALL_FILTERS.

property palette

palette?: Uint8ClampedArray;

_For creating indexed PNGs._ The palette of colors. Entries should be in RGBA order.

property resolution

resolution?: number;

pixels per inch

interface TextMetrics

interface TextMetrics {}

property actualBoundingBoxAscent

readonly actualBoundingBoxAscent: number;

property actualBoundingBoxDescent

readonly actualBoundingBoxDescent: number;

property actualBoundingBoxLeft

readonly actualBoundingBoxLeft: number;

property actualBoundingBoxRight

readonly actualBoundingBoxRight: number;

property fontBoundingBoxAscent

readonly fontBoundingBoxAscent: number;

property fontBoundingBoxDescent

readonly fontBoundingBoxDescent: number;

property width

readonly width: number;

Type Aliases

type CanvasFillRule

type CanvasFillRule = 'evenodd' | 'nonzero';

type CanvasLineCap

type CanvasLineCap = 'butt' | 'round' | 'square';

type CanvasLineJoin

type CanvasLineJoin = 'bevel' | 'miter' | 'round';

type CanvasTextAlign

type CanvasTextAlign = 'center' | 'end' | 'left' | 'right' | 'start';

type CanvasTextBaseline

type CanvasTextBaseline =
    | 'alphabetic'
    | 'bottom'
    | 'hanging'
    | 'ideographic'
    | 'middle'
    | 'top';

type GlobalCompositeOperation

type GlobalCompositeOperation =
    | 'clear'
    | 'copy'
    | 'destination'
    | 'source-over'
    | 'destination-over'
    | 'source-in'
    | 'destination-in'
    | 'source-out'
    | 'destination-out'
    | 'source-atop'
    | 'destination-atop'
    | 'xor'
    | 'lighter'
    | 'normal'
    | 'multiply'
    | 'screen'
    | 'overlay'
    | 'darken'
    | 'lighten'
    | 'color-dodge'
    | 'color-burn'
    | 'hard-light'
    | 'soft-light'
    | 'difference'
    | 'exclusion'
    | 'hue'
    | 'saturation'
    | 'color'
    | 'luminosity'
    | 'saturate';

Package Files (1)

types/index.d.ts

Dependencies (3)

Dev Dependencies (9)

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/canvas.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/canvas)

HTML

<a href="https://www.jsdocs.io/package/canvas"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 year ago.
Package analyzed in 3136 ms.
Missing or incorrect documentation? Open an issue for this package.

canvas

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable cairoVersion

variable freetypeVersion

variable gifVersion

variable jpegVersion

variable rsvgVersion

variable version

Functions

function createCanvas

Parameter type

function createImageData

Parameter data

Parameter height

Parameter data

Parameter height

function deregisterAllFonts

function loadImage

Parameter src

function registerFont

Parameter path

Parameter fontFace

Classes

class Canvas

constructor

property height

property PNG_ALL_FILTERS

property PNG_FILTER_AVG

property PNG_FILTER_NONE

property PNG_FILTER_PAETH

property PNG_FILTER_SUB

property PNG_FILTER_UP

property PNG_NO_FILTERS

property stride

property type

property width

method createJPEGStream

method createPDFStream

method createPNGStream

method getContext

method toBuffer

method toDataURL

class CanvasGradient

method addColorStop

class CanvasPattern

method setTransform

class CanvasRenderingContext2D

property antialias

property canvas

property currentTransform

property fillStyle

property font

property globalAlpha

property globalCompositeOperation

property imageSmoothingEnabled

property lineCap

property lineDashOffset

property lineJoin

property lineWidth

property miterLimit

property patternQuality

property quality

property shadowBlur

property shadowColor

property shadowOffsetX

property shadowOffsetY

property strokeStyle

property textAlign

property textBaseline

property textDrawingMode

method addPage

method arc