canvas

  • Version 3.2.0
  • Published
  • 409 kB
  • 2 dependencies
  • MIT license

Install

npm i canvas
yarn add canvas
pnpm add canvas

Overview

Canvas graphics API backed by Cairo

Index

Variables

Functions

Classes

Interfaces

Type Aliases

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

        static readonly PNG_ALL_FILTERS: number;
        • Constant used in PNG encoding methods.

        property PNG_FILTER_AVG

        static readonly PNG_FILTER_AVG: number;
        • Constant used in PNG encoding methods.

        property PNG_FILTER_NONE

        static readonly PNG_FILTER_NONE: number;
        • Constant used in PNG encoding methods.

        property PNG_FILTER_PAETH

        static readonly PNG_FILTER_PAETH: number;
        • Constant used in PNG encoding methods.

        property PNG_FILTER_SUB

        static readonly PNG_FILTER_SUB: number;
        • Constant used in PNG encoding methods.

        property PNG_FILTER_UP

        static readonly PNG_FILTER_UP: number;
        • Constant used in PNG encoding methods.

        property PNG_NO_FILTERS

        static 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 direction

                              direction: 'ltr' | 'rtl';

                                property fillStyle

                                fillStyle: string | CanvasPattern | CanvasGradient;

                                  property font

                                  font: string;

                                    property globalAlpha

                                    globalAlpha: number;

                                      property globalCompositeOperation

                                      globalCompositeOperation: GlobalCompositeOperation;

                                        property imageSmoothingEnabled

                                        imageSmoothingEnabled: boolean;

                                          property lang

                                          lang: string;

                                            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 beginTag

                                                                          beginTag: (tagName: string, attributes?: string) => 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 endTag

                                                                                                endTag: (tagName: string) => 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;
                                                                                                                                          (a: number, b: number, c: number, d: number, e: number, f: number): 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 scaleNonUniform

                                                                                                                                                                                                                                                scaleNonUniform: (scaleX?: number, scaleY?: number) => DOMMatrix;
                                                                                                                                                                                                                                                • Deprecated

                                                                                                                                                                                                                                                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 toJSON

                                                                                                                                                                                                                                                                toJSON: () => any;

                                                                                                                                                                                                                                                                  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;

                                                                                                                                                                                                                                                                                    method fromPoint

                                                                                                                                                                                                                                                                                    static fromPoint: (other?: DOMPointInit) => DOMPoint;

                                                                                                                                                                                                                                                                                      method matrixTransform

                                                                                                                                                                                                                                                                                      matrixTransform: (matrix?: DOMMatrixInit) => DOMPoint;

                                                                                                                                                                                                                                                                                        method toJSON

                                                                                                                                                                                                                                                                                        toJSON: () => any;

                                                                                                                                                                                                                                                                                          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 DOMPointInit

                                                                                                                                                                                                                                                                                                            interface DOMPointInit {}

                                                                                                                                                                                                                                                                                                              property w

                                                                                                                                                                                                                                                                                                              w?: number;

                                                                                                                                                                                                                                                                                                                property x

                                                                                                                                                                                                                                                                                                                x?: number;

                                                                                                                                                                                                                                                                                                                  property y

                                                                                                                                                                                                                                                                                                                  y?: number;

                                                                                                                                                                                                                                                                                                                    property z

                                                                                                                                                                                                                                                                                                                    z?: number;

                                                                                                                                                                                                                                                                                                                      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 alphabeticBaseline

                                                                                                                                                                                                                                                                                                                                                          readonly alphabeticBaseline: number;

                                                                                                                                                                                                                                                                                                                                                            property emHeightAscent

                                                                                                                                                                                                                                                                                                                                                            readonly emHeightAscent: number;

                                                                                                                                                                                                                                                                                                                                                              property emHeightDescent

                                                                                                                                                                                                                                                                                                                                                              readonly emHeightDescent: 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 DOMMatrixInit

                                                                                                                                                                                                                                                                                                                                                                                type DOMMatrixInit = DOMMatrix | string | number[];

                                                                                                                                                                                                                                                                                                                                                                                  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)

                                                                                                                                                                                                                                                                                                                                                                                    Dependencies (2)

                                                                                                                                                                                                                                                                                                                                                                                    Dev Dependencies (9)

                                                                                                                                                                                                                                                                                                                                                                                    Peer Dependencies (0)

                                                                                                                                                                                                                                                                                                                                                                                    No peer dependencies.

                                                                                                                                                                                                                                                                                                                                                                                    Badge

                                                                                                                                                                                                                                                                                                                                                                                    To add a badge like this onejsDocs.io badgeto 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>