Interface CanvasRenderingContext2D

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a canvas element.

MDN Reference

interface CanvasRenderingContext2D {
    canvas: HTMLCanvasElement;
    direction: CanvasDirection;
    fillStyle: string | CanvasGradient | CanvasPattern;
    filter: string;
    font: string;
    fontKerning: CanvasFontKerning;
    fontStretch: CanvasFontStretch;
    fontVariantCaps: CanvasFontVariantCaps;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    imageSmoothingEnabled: boolean;
    imageSmoothingQuality: ImageSmoothingQuality;
    letterSpacing: string;
    lineCap: CanvasLineCap;
    lineDashOffset: number;
    lineJoin: CanvasLineJoin;
    lineWidth: number;
    miterLimit: number;
    shadowBlur: number;
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    strokeStyle: string | CanvasGradient | CanvasPattern;
    textAlign: CanvasTextAlign;
    textBaseline: CanvasTextBaseline;
    textRendering: CanvasTextRendering;
    wordSpacing: string;
    arc(
        x: number,
        y: number,
        radius: number,
        startAngle: number,
        endAngle: number,
        counterclockwise?: boolean,
    ): void;
    arc(
        x: number,
        y: number,
        radius: number,
        startAngle: number,
        endAngle: number,
        counterclockwise?: boolean,
    ): void;
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
    beginPath(): void;
    beginPath(): void;
    bezierCurveTo(
        cp1x: number,
        cp1y: number,
        cp2x: number,
        cp2y: number,
        x: number,
        y: number,
    ): void;
    bezierCurveTo(
        cp1x: number,
        cp1y: number,
        cp2x: number,
        cp2y: number,
        x: number,
        y: number,
    ): void;
    clearRect(x: number, y: number, w: number, h: number): void;
    clearRect(x: number, y: number, w: number, h: number): void;
    clip(fillRule?: CanvasFillRule): void;
    clip(path: Path2D, fillRule?: CanvasFillRule): void;
    clip(fillRule?: CanvasFillRule): void;
    clip(path: Path2D, fillRule?: CanvasFillRule): void;
    closePath(): void;
    closePath(): void;
    createConicGradient(
        startAngle: number,
        x: number,
        y: number,
    ): CanvasGradient;
    createConicGradient(
        startAngle: number,
        x: number,
        y: number,
    ): CanvasGradient;
    createImageData(
        sw: number,
        sh: number,
        settings?: ImageDataSettings,
    ): ImageData;
    createImageData(imageData: ImageData): ImageData;
    createImageData(
        sw: number,
        sh: number,
        settings?: ImageDataSettings,
    ): ImageData;
    createImageData(imageData: ImageData): ImageData;
    createLinearGradient(
        x0: number,
        y0: number,
        x1: number,
        y1: number,
    ): CanvasGradient;
    createLinearGradient(
        x0: number,
        y0: number,
        x1: number,
        y1: number,
    ): CanvasGradient;
    createPattern(
        image: CanvasImageSource,
        repetition: string | null,
    ): CanvasPattern | null;
    createPattern(
        image: CanvasImageSource,
        repetition: string | null,
    ): CanvasPattern | null;
    createRadialGradient(
        x0: number,
        y0: number,
        r0: number,
        x1: number,
        y1: number,
        r1: number,
    ): CanvasGradient;
    createRadialGradient(
        x0: number,
        y0: number,
        r0: number,
        x1: number,
        y1: number,
        r1: number,
    ): CanvasGradient;
    drawFocusIfNeeded(element: Element): void;
    drawFocusIfNeeded(path: Path2D, element: Element): void;
    drawImage(image: CanvasImageSource, dx: number, dy: number): void;
    drawImage(
        image: CanvasImageSource,
        dx: number,
        dy: number,
        dw: number,
        dh: number,
    ): void;
    drawImage(
        image: CanvasImageSource,
        sx: number,
        sy: number,
        sw: number,
        sh: number,
        dx: number,
        dy: number,
        dw: number,
        dh: number,
    ): void;
    drawImage(image: CanvasImageSource, dx: number, dy: number): void;
    drawImage(
        image: CanvasImageSource,
        dx: number,
        dy: number,
        dw: number,
        dh: number,
    ): void;
    drawImage(
        image: CanvasImageSource,
        sx: number,
        sy: number,
        sw: number,
        sh: number,
        dx: number,
        dy: number,
        dw: number,
        dh: number,
    ): void;
    ellipse(
        x: number,
        y: number,
        radiusX: number,
        radiusY: number,
        rotation: number,
        startAngle: number,
        endAngle: number,
        counterclockwise?: boolean,
    ): void;
    ellipse(
        x: number,
        y: number,
        radiusX: number,
        radiusY: number,
        rotation: number,
        startAngle: number,
        endAngle: number,
        counterclockwise?: boolean,
    ): void;
    fill(fillRule?: CanvasFillRule): void;
    fill(path: Path2D, fillRule?: CanvasFillRule): void;
    fill(fillRule?: CanvasFillRule): void;
    fill(path: Path2D, fillRule?: CanvasFillRule): void;
    fillRect(x: number, y: number, w: number, h: number): void;
    fillRect(x: number, y: number, w: number, h: number): void;
    fillText(text: string, x: number, y: number, maxWidth?: number): void;
    fillText(text: string, x: number, y: number, maxWidth?: number): void;
    getContextAttributes(): CanvasRenderingContext2DSettings;
    getImageData(
        sx: number,
        sy: number,
        sw: number,
        sh: number,
        settings?: ImageDataSettings,
    ): ImageData;
    getImageData(
        sx: number,
        sy: number,
        sw: number,
        sh: number,
        settings?: ImageDataSettings,
    ): ImageData;
    getLineDash(): number[];
    getLineDash(): number[];
    getTransform(): DOMMatrix;
    getTransform(): DOMMatrix;
    isContextLost(): boolean;
    isContextLost(): boolean;
    isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
    isPointInPath(
        path: Path2D,
        x: number,
        y: number,
        fillRule?: CanvasFillRule,
    ): boolean;
    isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
    isPointInPath(
        path: Path2D,
        x: number,
        y: number,
        fillRule?: CanvasFillRule,
    ): boolean;
    isPointInStroke(x: number, y: number): boolean;
    isPointInStroke(path: Path2D, x: number, y: number): boolean;
    isPointInStroke(x: number, y: number): boolean;
    isPointInStroke(path: Path2D, x: number, y: number): boolean;
    lineTo(x: number, y: number): void;
    lineTo(x: number, y: number): void;
    measureText(text: string): TextMetrics;
    measureText(text: string): TextMetrics;
    moveTo(x: number, y: number): void;
    moveTo(x: number, y: number): void;
    putImageData(imageData: ImageData, dx: number, dy: number): void;
    putImageData(
        imageData: ImageData,
        dx: number,
        dy: number,
        dirtyX: number,
        dirtyY: number,
        dirtyWidth: number,
        dirtyHeight: number,
    ): void;
    putImageData(imageData: ImageData, dx: number, dy: number): void;
    putImageData(
        imageData: ImageData,
        dx: number,
        dy: number,
        dirtyX: number,
        dirtyY: number,
        dirtyWidth: number,
        dirtyHeight: number,
    ): void;
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    rect(x: number, y: number, w: number, h: number): void;
    rect(x: number, y: number, w: number, h: number): void;
    reset(): void;
    reset(): void;
    resetTransform(): void;
    resetTransform(): void;
    restore(): void;
    restore(): void;
    rotate(angle: number): void;
    rotate(angle: number): void;
    roundRect(
        x: number,
        y: number,
        w: number,
        h: number,
        radii?: number | DOMPointInit | (number | DOMPointInit)[],
    ): void;
    roundRect(
        x: number,
        y: number,
        w: number,
        h: number,
        radii?: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>,
    ): void;
    roundRect(
        x: number,
        y: number,
        w: number,
        h: number,
        radii?: number | DOMPointInit | (number | DOMPointInit)[],
    ): void;
    save(): void;
    save(): void;
    scale(x: number, y: number): void;
    scale(x: number, y: number): void;
    setLineDash(segments: number[]): void;
    setLineDash(segments: Iterable<number>): void;
    setLineDash(segments: number[]): void;
    setTransform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    setTransform(transform?: DOMMatrix2DInit): void;
    setTransform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    setTransform(transform?: DOMMatrix2DInit): void;
    stroke(): void;
    stroke(path: Path2D): void;
    stroke(): void;
    stroke(path: Path2D): void;
    strokeRect(x: number, y: number, w: number, h: number): void;
    strokeRect(x: number, y: number, w: number, h: number): void;
    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
    transform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    transform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    translate(x: number, y: number): void;
    translate(x: number, y: number): void;
}

Hierarchy (View Summary)

CanvasCompositing
CanvasDrawImage
CanvasDrawPath
CanvasFillStrokeStyles
CanvasFilters
CanvasImageData
CanvasImageSmoothing
CanvasPath
CanvasPathDrawingStyles
CanvasRect
CanvasSettings
CanvasShadowStyles
CanvasState
CanvasText
CanvasTextDrawingStyles
CanvasTransform
CanvasUserInterface
- CanvasRenderingContext2D

Index

Properties

`Readonly`canvas

canvas: HTMLCanvasElement

The CanvasRenderingContext2D.canvas property, part of the Canvas API, is a read-only reference to the might be null if there is no associated canvas element.

MDN Reference

direction

direction: CanvasDirection

MDN Reference

fillStyle

fillStyle: string | CanvasGradient | CanvasPattern

MDN Reference

filter

filter: string

MDN Reference

font

font: string

MDN Reference

globalAlpha

globalAlpha: number

MDN Reference

globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation

MDN Reference

imageSmoothingEnabled

imageSmoothingEnabled: boolean

MDN Reference

imageSmoothingQuality

imageSmoothingQuality: ImageSmoothingQuality

MDN Reference

letterSpacing

letterSpacing: string

MDN Reference

lineCap

lineCap: CanvasLineCap

MDN Reference

lineDashOffset

lineDashOffset: number

MDN Reference

lineJoin

lineJoin: CanvasLineJoin

MDN Reference

lineWidth

lineWidth: number

MDN Reference

miterLimit

miterLimit: number

MDN Reference

shadowBlur

shadowBlur: number

MDN Reference

shadowColor

shadowColor: string

MDN Reference

shadowOffsetX

shadowOffsetX: number

MDN Reference

shadowOffsetY

shadowOffsetY: number

MDN Reference

strokeStyle

strokeStyle: string | CanvasGradient | CanvasPattern

MDN Reference

textAlign

textAlign: CanvasTextAlign

MDN Reference

textBaseline

textBaseline: CanvasTextBaseline

MDN Reference

textRendering

textRendering: CanvasTextRendering

MDN Reference

wordSpacing

wordSpacing: string

MDN Reference

Methods

arc

arc(
    x: number,
    y: number,
    radius: number,
    startAngle: number,
    endAngle: number,
    counterclockwise?: boolean,
): void
MDN Reference
Parameters
- x: number
- y: number
- radius: number
- startAngle: number
- endAngle: number
- Optionalcounterclockwise: boolean
Returns void
Inherited from CanvasPath.arc
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7676
arc(
    x: number,
    y: number,
    radius: number,
    startAngle: number,
    endAngle: number,
    counterclockwise?: boolean,
): void
MDN Reference
Parameters
- x: number
- y: number
- radius: number
- startAngle: number
- endAngle: number
- Optionalcounterclockwise: boolean
Returns void
Inherited from CanvasPath.arc
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2364

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
MDN Reference
Parameters
- x1: number
- y1: number
- x2: number
- y2: number
- radius: number
Returns void
Inherited from CanvasPath.arcTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7678
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
MDN Reference
Parameters
- x1: number
- y1: number
- x2: number
- y2: number
- radius: number
Returns void
Inherited from CanvasPath.arcTo
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2366

beginPath

beginPath(): void
MDN Reference

Returns void
Inherited from CanvasDrawPath.beginPath
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7599
beginPath(): void
MDN Reference

Returns void
Inherited from CanvasDrawPath.beginPath
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2287

bezierCurveTo

bezierCurveTo(
    cp1x: number,
    cp1y: number,
    cp2x: number,
    cp2y: number,
    x: number,
    y: number,
): void
MDN Reference
Parameters
- cp1x: number
- cp1y: number
- cp2x: number
- cp2y: number
- x: number
- y: number
Returns void
Inherited from CanvasPath.bezierCurveTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7680
bezierCurveTo(
    cp1x: number,
    cp1y: number,
    cp2x: number,
    cp2y: number,
    x: number,
    y: number,
): void
MDN Reference
Parameters
- cp1x: number
- cp1y: number
- cp2x: number
- cp2y: number
- x: number
- y: number
Returns void
Inherited from CanvasPath.bezierCurveTo
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2368

clearRect

clearRect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.clearRect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7735
clearRect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.clearRect
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2423

clip

clip(fillRule?: CanvasFillRule): void
MDN Reference
Parameters
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.clip
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7601
clip(path: Path2D, fillRule?: CanvasFillRule): void
Parameters
- path: Path2D
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.clip
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7602
clip(fillRule?: CanvasFillRule): void
MDN Reference
Parameters
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.clip
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2289
clip(path: Path2D, fillRule?: CanvasFillRule): void
Parameters
- path: Path2D
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.clip
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2290

closePath

closePath(): void
MDN Reference

Returns void
Inherited from CanvasPath.closePath
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7682
closePath(): void
MDN Reference

Returns void
Inherited from CanvasPath.closePath
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2370

createConicGradient

createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
MDN Reference
Parameters
- startAngle: number
- x: number
- y: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createConicGradient
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7623
createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
MDN Reference
Parameters
- startAngle: number
- x: number
- y: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createConicGradient
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2311

createImageData

createImageData(sw: number, sh: number, settings?: ImageDataSettings): ImageData
MDN Reference
Parameters
- sw: number
- sh: number
- Optionalsettings: ImageDataSettings
Returns ImageData
Inherited from CanvasImageData.createImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7658
createImageData(imageData: ImageData): ImageData
Parameters
- imageData: ImageData
Returns ImageData
Inherited from CanvasImageData.createImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7659
createImageData(sw: number, sh: number, settings?: ImageDataSettings): ImageData
MDN Reference
Parameters
- sw: number
- sh: number
- Optionalsettings: ImageDataSettings
Returns ImageData
Inherited from CanvasImageData.createImageData
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2346
createImageData(imageData: ImageData): ImageData
Parameters
- imageData: ImageData
Returns ImageData
Inherited from CanvasImageData.createImageData
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2347

createLinearGradient

createLinearGradient(
    x0: number,
    y0: number,
    x1: number,
    y1: number,
): CanvasGradient
MDN Reference
Parameters
- x0: number
- y0: number
- x1: number
- y1: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createLinearGradient
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7625
createLinearGradient(
    x0: number,
    y0: number,
    x1: number,
    y1: number,
): CanvasGradient
MDN Reference
Parameters
- x0: number
- y0: number
- x1: number
- y1: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createLinearGradient
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2313

createPattern

createPattern(
image: CanvasImageSource,
repetition: string | null,
): CanvasPattern | null
MDN Reference
Parameters
- image: CanvasImageSource
- repetition: string | null
Returns CanvasPattern | null
Inherited from CanvasFillStrokeStyles.createPattern
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7627
createPattern(
image: CanvasImageSource,
repetition: string | null,
): CanvasPattern | null
MDN Reference
Parameters
- image: CanvasImageSource
- repetition: string | null
Returns CanvasPattern | null
Inherited from CanvasFillStrokeStyles.createPattern
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2315

createRadialGradient

createRadialGradient(
    x0: number,
    y0: number,
    r0: number,
    x1: number,
    y1: number,
    r1: number,
): CanvasGradient
MDN Reference
Parameters
- x0: number
- y0: number
- r0: number
- x1: number
- y1: number
- r1: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createRadialGradient
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7629
createRadialGradient(
    x0: number,
    y0: number,
    r0: number,
    x1: number,
    y1: number,
    r1: number,
): CanvasGradient
MDN Reference
Parameters
- x0: number
- y0: number
- r0: number
- x1: number
- y1: number
- r1: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createRadialGradient
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2317

drawFocusIfNeeded

drawFocusIfNeeded(element: Element): void
MDN Reference
Parameters
- element: Element
Returns void
Inherited from CanvasUserInterface.drawFocusIfNeeded
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7840
drawFocusIfNeeded(path: Path2D, element: Element): void
Parameters
- path: Path2D
- element: Element
Returns void
Inherited from CanvasUserInterface.drawFocusIfNeeded
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7841

drawImage

drawImage(image: CanvasImageSource, dx: number, dy: number): void
MDN Reference
Parameters
- image: CanvasImageSource
- dx: number
- dy: number
Returns void
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7592
drawImage(
    image: CanvasImageSource,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
): void
Parameters
- image: CanvasImageSource
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7593
drawImage(
    image: CanvasImageSource,
    sx: number,
    sy: number,
    sw: number,
    sh: number,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
): void
Parameters
- image: CanvasImageSource
- sx: number
- sy: number
- sw: number
- sh: number
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7594
drawImage(image: CanvasImageSource, dx: number, dy: number): void
MDN Reference
Parameters
- image: CanvasImageSource
- dx: number
- dy: number
Returns void
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2280
drawImage(
    image: CanvasImageSource,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
): void
Parameters
- image: CanvasImageSource
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2281
drawImage(
    image: CanvasImageSource,
    sx: number,
    sy: number,
    sw: number,
    sh: number,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
): void
Parameters
- image: CanvasImageSource
- sx: number
- sy: number
- sw: number
- sh: number
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2282

ellipse

ellipse(
    x: number,
    y: number,
    radiusX: number,
    radiusY: number,
    rotation: number,
    startAngle: number,
    endAngle: number,
    counterclockwise?: boolean,
): void
MDN Reference
Parameters
- x: number
- y: number
- radiusX: number
- radiusY: number
- rotation: number
- startAngle: number
- endAngle: number
- Optionalcounterclockwise: boolean
Returns void
Inherited from CanvasPath.ellipse
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7684
ellipse(
    x: number,
    y: number,
    radiusX: number,
    radiusY: number,
    rotation: number,
    startAngle: number,
    endAngle: number,
    counterclockwise?: boolean,
): void
MDN Reference
Parameters
- x: number
- y: number
- radiusX: number
- radiusY: number
- rotation: number
- startAngle: number
- endAngle: number
- Optionalcounterclockwise: boolean
Returns void
Inherited from CanvasPath.ellipse
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2372

fill

fill(fillRule?: CanvasFillRule): void
MDN Reference
Parameters
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.fill
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7604
fill(path: Path2D, fillRule?: CanvasFillRule): void
Parameters
- path: Path2D
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.fill
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7605
fill(fillRule?: CanvasFillRule): void
MDN Reference
Parameters
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.fill
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2292
fill(path: Path2D, fillRule?: CanvasFillRule): void
Parameters
- path: Path2D
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.fill
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2293

fillRect

fillRect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.fillRect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7737
fillRect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.fillRect
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2425

fillText

fillText(text: string, x: number, y: number, maxWidth?: number): void
MDN Reference
Parameters
- text: string
- x: number
- y: number
- OptionalmaxWidth: number
Returns void
Inherited from CanvasText.fillText
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7790
fillText(text: string, x: number, y: number, maxWidth?: number): void
MDN Reference
Parameters
- text: string
- x: number
- y: number
- OptionalmaxWidth: number
Returns void
Inherited from CanvasText.fillText
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2454

getContextAttributes

getContextAttributes(): CanvasRenderingContext2DSettings
MDN Reference

Returns CanvasRenderingContext2DSettings
Inherited from CanvasSettings.getContextAttributes
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7763

getImageData

getImageData(
    sx: number,
    sy: number,
    sw: number,
    sh: number,
    settings?: ImageDataSettings,
): ImageData
MDN Reference
Parameters
- sx: number
- sy: number
- sw: number
- sh: number
- Optionalsettings: ImageDataSettings
Returns ImageData
Inherited from CanvasImageData.getImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7661
getImageData(
    sx: number,
    sy: number,
    sw: number,
    sh: number,
    settings?: ImageDataSettings,
): ImageData
MDN Reference
Parameters
- sx: number
- sy: number
- sw: number
- sh: number
- Optionalsettings: ImageDataSettings
Returns ImageData
Inherited from CanvasImageData.getImageData
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2349

getLineDash

getLineDash(): number[]
MDN Reference

Returns number[]
Inherited from CanvasPathDrawingStyles.getLineDash
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7709
getLineDash(): number[]
MDN Reference

Returns number[]
Inherited from CanvasPathDrawingStyles.getLineDash
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2397

getTransform

getTransform(): DOMMatrix
MDN Reference

Returns DOMMatrix
Inherited from CanvasTransform.getTransform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7822
getTransform(): DOMMatrix
MDN Reference

Returns DOMMatrix
Inherited from CanvasTransform.getTransform
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2486

isContextLost

isContextLost(): boolean
MDN Reference

Returns boolean
Inherited from CanvasState.isContextLost
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7779
isContextLost(): boolean
MDN Reference

Returns boolean
Inherited from CanvasState.isContextLost
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2443

isPointInPath

isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean
MDN Reference
Parameters
- x: number
- y: number
- OptionalfillRule: CanvasFillRule
Returns boolean
Inherited from CanvasDrawPath.isPointInPath
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7607
isPointInPath(
    path: Path2D,
    x: number,
    y: number,
    fillRule?: CanvasFillRule,
): boolean
Parameters
- path: Path2D
- x: number
- y: number
- OptionalfillRule: CanvasFillRule
Returns boolean
Inherited from CanvasDrawPath.isPointInPath
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7608
isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean
MDN Reference
Parameters
- x: number
- y: number
- OptionalfillRule: CanvasFillRule
Returns boolean
Inherited from CanvasDrawPath.isPointInPath
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2295
isPointInPath(
    path: Path2D,
    x: number,
    y: number,
    fillRule?: CanvasFillRule,
): boolean
Parameters
- path: Path2D
- x: number
- y: number
- OptionalfillRule: CanvasFillRule
Returns boolean
Inherited from CanvasDrawPath.isPointInPath
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2296

isPointInStroke

isPointInStroke(x: number, y: number): boolean
MDN Reference
Parameters
- x: number
- y: number
Returns boolean
Inherited from CanvasDrawPath.isPointInStroke
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7610
isPointInStroke(path: Path2D, x: number, y: number): boolean
Parameters
- path: Path2D
- x: number
- y: number
Returns boolean
Inherited from CanvasDrawPath.isPointInStroke
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7611
isPointInStroke(x: number, y: number): boolean
MDN Reference
Parameters
- x: number
- y: number
Returns boolean
Inherited from CanvasDrawPath.isPointInStroke
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2298
isPointInStroke(path: Path2D, x: number, y: number): boolean
Parameters
- path: Path2D
- x: number
- y: number
Returns boolean
Inherited from CanvasDrawPath.isPointInStroke
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2299

lineTo

lineTo(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.lineTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7686
lineTo(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.lineTo
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2374

measureText

measureText(text: string): TextMetrics
MDN Reference
Parameters
- text: string
Returns TextMetrics
Inherited from CanvasText.measureText
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7792
measureText(text: string): TextMetrics
MDN Reference
Parameters
- text: string
Returns TextMetrics
Inherited from CanvasText.measureText
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2456

moveTo

moveTo(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.moveTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7688
moveTo(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.moveTo
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2376

putImageData

putImageData(imageData: ImageData, dx: number, dy: number): void
MDN Reference
Parameters
- imageData: ImageData
- dx: number
- dy: number
Returns void
Inherited from CanvasImageData.putImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7663
putImageData(
    imageData: ImageData,
    dx: number,
    dy: number,
    dirtyX: number,
    dirtyY: number,
    dirtyWidth: number,
    dirtyHeight: number,
): void
Parameters
- imageData: ImageData
- dx: number
- dy: number
- dirtyX: number
- dirtyY: number
- dirtyWidth: number
- dirtyHeight: number
Returns void
Inherited from CanvasImageData.putImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7664
putImageData(imageData: ImageData, dx: number, dy: number): void
MDN Reference
Parameters
- imageData: ImageData
- dx: number
- dy: number
Returns void
Inherited from CanvasImageData.putImageData
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2351
putImageData(
    imageData: ImageData,
    dx: number,
    dy: number,
    dirtyX: number,
    dirtyY: number,
    dirtyWidth: number,
    dirtyHeight: number,
): void
Parameters
- imageData: ImageData
- dx: number
- dy: number
- dirtyX: number
- dirtyY: number
- dirtyWidth: number
- dirtyHeight: number
Returns void
Inherited from CanvasImageData.putImageData
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2352

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
MDN Reference
Parameters
- cpx: number
- cpy: number
- x: number
- y: number
Returns void
Inherited from CanvasPath.quadraticCurveTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7690
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
MDN Reference
Parameters
- cpx: number
- cpy: number
- x: number
- y: number
Returns void
Inherited from CanvasPath.quadraticCurveTo
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2378

rect

rect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasPath.rect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7692
rect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasPath.rect
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2380

reset

reset(): void
MDN Reference

Returns void
Inherited from CanvasState.reset
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7781
reset(): void
MDN Reference

Returns void
Inherited from CanvasState.reset
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2445

resetTransform

resetTransform(): void
MDN Reference

Returns void
Inherited from CanvasTransform.resetTransform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7824
resetTransform(): void
MDN Reference

Returns void
Inherited from CanvasTransform.resetTransform
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2488

restore

restore(): void
MDN Reference

Returns void
Inherited from CanvasState.restore
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7783
restore(): void
MDN Reference

Returns void
Inherited from CanvasState.restore
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2447

rotate

rotate(angle: number): void
MDN Reference
Parameters
- angle: number
Returns void
Inherited from CanvasTransform.rotate
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7826
rotate(angle: number): void
MDN Reference
Parameters
- angle: number
Returns void
Inherited from CanvasTransform.rotate
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2490

roundRect

roundRect(
    x: number,
    y: number,
    w: number,
    h: number,
    radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
- Optionalradii: number | DOMPointInit | (number | DOMPointInit)[]
Returns void
Inherited from CanvasPath.roundRect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7694
roundRect(
    x: number,
    y: number,
    w: number,
    h: number,
    radii?: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>,
): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
- Optionalradii: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>
Returns void
Inherited from CanvasPath.roundRect
- Defined in node_modules/typescript/lib/lib.dom.iterable.d.ts:94
roundRect(
    x: number,
    y: number,
    w: number,
    h: number,
    radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
- Optionalradii: number | DOMPointInit | (number | DOMPointInit)[]
Returns void
Inherited from CanvasPath.roundRect
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2382

save

save(): void
MDN Reference

Returns void
Inherited from CanvasState.save
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7785
save(): void
MDN Reference

Returns void
Inherited from CanvasState.save
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2449

scale

scale(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasTransform.scale
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7828
scale(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasTransform.scale
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2492

setLineDash

setLineDash(segments: number[]): void
MDN Reference
Parameters
- segments: number[]
Returns void
Inherited from CanvasPathDrawingStyles.setLineDash
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7711
setLineDash(segments: Iterable<number>): void
MDN Reference
Parameters
- segments: Iterable<number>
Returns void
Inherited from CanvasPathDrawingStyles.setLineDash
- Defined in node_modules/typescript/lib/lib.dom.iterable.d.ts:99
setLineDash(segments: number[]): void
MDN Reference
Parameters
- segments: number[]
Returns void
Inherited from CanvasPathDrawingStyles.setLineDash
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2399

setTransform

setTransform(
    a: number,
    b: number,
    c: number,
    d: number,
    e: number,
    f: number,
): void
MDN Reference
Parameters
- a: number
- b: number
- c: number
- d: number
- e: number
- f: number
Returns void
Inherited from CanvasTransform.setTransform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7830
setTransform(transform?: DOMMatrix2DInit): void
Parameters
- Optionaltransform: DOMMatrix2DInit
Returns void
Inherited from CanvasTransform.setTransform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7831
setTransform(
    a: number,
    b: number,
    c: number,
    d: number,
    e: number,
    f: number,
): void
MDN Reference
Parameters
- a: number
- b: number
- c: number
- d: number
- e: number
- f: number
Returns void
Inherited from CanvasTransform.setTransform
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2494
setTransform(transform?: DOMMatrix2DInit): void
Parameters
- Optionaltransform: DOMMatrix2DInit
Returns void
Inherited from CanvasTransform.setTransform
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2495

stroke

stroke(): void
MDN Reference

Returns void
Inherited from CanvasDrawPath.stroke
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7613
stroke(path: Path2D): void
Parameters
- path: Path2D
Returns void
Inherited from CanvasDrawPath.stroke
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7614
stroke(): void
MDN Reference

Returns void
Inherited from CanvasDrawPath.stroke
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2301
stroke(path: Path2D): void
Parameters
- path: Path2D
Returns void
Inherited from CanvasDrawPath.stroke
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2302

strokeRect

strokeRect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.strokeRect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7739
strokeRect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.strokeRect
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2427

strokeText

strokeText(text: string, x: number, y: number, maxWidth?: number): void
MDN Reference
Parameters
- text: string
- x: number
- y: number
- OptionalmaxWidth: number
Returns void
Inherited from CanvasText.strokeText
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7794
strokeText(text: string, x: number, y: number, maxWidth?: number): void
MDN Reference
Parameters
- text: string
- x: number
- y: number
- OptionalmaxWidth: number
Returns void
Inherited from CanvasText.strokeText
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2458

transform

transform(
    a: number,
    b: number,
    c: number,
    d: number,
    e: number,
    f: number,
): void
MDN Reference
Parameters
- a: number
- b: number
- c: number
- d: number
- e: number
- f: number
Returns void
Inherited from CanvasTransform.transform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7833
transform(
    a: number,
    b: number,
    c: number,
    d: number,
    e: number,
    f: number,
): void
MDN Reference
Parameters
- a: number
- b: number
- c: number
- d: number
- e: number
- f: number
Returns void
Inherited from CanvasTransform.transform
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2497

translate

translate(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasTransform.translate
- Defined in node_modules/typescript/lib/lib.dom.d.ts:7835
translate(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasTransform.translate
- Defined in node_modules/typescript/lib/lib.webworker.d.ts:2499

Interface CanvasRenderingContext2D

Hierarchy (View Summary)

Index

Properties

Methods

Properties

Readonlycanvas

direction

fillStyle

filter

font

fontKerning

fontStretch

fontVariantCaps

globalAlpha

globalCompositeOperation

imageSmoothingEnabled

imageSmoothingQuality

letterSpacing

lineCap

lineDashOffset

lineJoin

lineWidth

miterLimit

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

strokeStyle

textAlign

textBaseline

textRendering

wordSpacing

Methods

arc

Parameters

Returns void

Parameters

Returns void

arcTo

Parameters

Returns void

Parameters

Returns void

beginPath

Returns void

Returns void

bezierCurveTo

Parameters

Returns void

Parameters

Returns void

clearRect

Parameters

Returns void

Parameters

Returns void

clip

Parameters

Returns void

Parameters

Returns void

Parameters

Returns void

Parameters

Returns void

closePath

Returns void

Returns void

createConicGradient

Parameters

Returns CanvasGradient

Parameters

Returns CanvasGradient

createImageData

Parameters

Returns ImageData

Parameters

Returns ImageData

Parameters

`Readonly`canvas