Interface CanvasRenderingContext2D

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

interface CanvasRenderingContext2D {
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    fillStyle: string | CanvasGradient | CanvasPattern | CanvasTexture;
    strokeStyle: string | CanvasGradient | CanvasPattern | CanvasTexture;
    filter: string;
    imageSmoothingEnabled: boolean;
    imageSmoothingQuality: ImageSmoothingQuality;
    lineCap: CanvasLineCap;
    lineDashOffset: number;
    lineJoin: CanvasLineJoin;
    lineWidth: number;
    miterLimit: number;
    shadowBlur: number;
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    direction: CanvasDirection;
    font: string;
    fontStretch: CanvasFontStretch;
    letterSpacing: string;
    textAlign: CanvasTextAlign;
    textBaseline: CanvasTextBaseline;
    wordSpacing: string;
    canvas: Canvas;
    fontVariant: FontVariantSetting;
    fontHinting: boolean;
    textWrap: boolean;
    textDecoration: string;
    lineDashMarker: null | Path2D;
    lineDashFit: "move" | "turn" | "follow";
    get currentTransform(): DOMMatrix;
    set currentTransform(matrix: Matrix): void;
    drawImage(image: CanvasDrawable, dx: number, dy: number): void;
    drawImage(
        image: CanvasDrawable,
        dx: number,
        dy: number,
        dw: number,
        dh: number,
    ): void;
    drawImage(
        image: CanvasDrawable,
        sx: number,
        sy: number,
        sw: number,
        sh: number,
        dx: number,
        dy: number,
        dw: number,
        dh: number,
    ): void;
    drawCanvas(image: Canvas, dx: number, dy: number): void;
    drawCanvas(
        image: Canvas,
        dx: number,
        dy: number,
        dw: number,
        dh: number,
    ): void;
    drawCanvas(
        image: Canvas,
        sx: number,
        sy: number,
        sw: number,
        sh: number,
        dx: number,
        dy: number,
        dw: number,
        dh: number,
    ): void;
    beginPath(): void;
    clip(fillRule?: CanvasFillRule): void;
    clip(path: Path2D, fillRule?: CanvasFillRule): void;
    fill(fillRule?: CanvasFillRule): void;
    fill(path: Path2D, fillRule?: CanvasFillRule): void;
    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;
    stroke(): void;
    stroke(path: Path2D): void;
    createConicGradient(
        startAngle: number,
        x: number,
        y: number,
    ): CanvasGradient;
    createLinearGradient(
        x0: number,
        y0: number,
        x1: number,
        y1: number,
    ): CanvasGradient;
    createPattern(
        image: CanvasPatternSource,
        repetition: null | string,
    ): null | CanvasPattern;
    createRadialGradient(
        x0: number,
        y0: number,
        r0: number,
        x1: number,
        y1: number,
        r1: number,
    ): CanvasGradient;
    createTexture(
        spacing: Offset,
        options?: CreateTextureOptions,
    ): CanvasTexture;
    createImageData(
        width: number,
        height: number,
        settings?: ImageDataSettings,
    ): ImageData;
    createImageData(imagedata: ImageData): ImageData;
    getImageData(
        x: number,
        y: number,
        width: number,
        height: number,
        settings?: ImageDataSettings,
    ): ImageData;
    putImageData(imagedata: ImageData, dx: number, dy: number): void;
    putImageData(
        imagedata: ImageData,
        dx: number,
        dy: number,
        dirtyX: number,
        dirtyY: number,
        dirtyWidth: number,
        dirtyHeight: number,
    ): 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;
    bezierCurveTo(
        cp1x: number,
        cp1y: number,
        cp2x: number,
        cp2y: number,
        x: number,
        y: number,
    ): void;
    closePath(): void;
    ellipse(
        x: number,
        y: number,
        radiusX: number,
        radiusY: number,
        rotation: number,
        startAngle: number,
        endAngle: number,
        counterclockwise?: boolean,
    ): void;
    lineTo(x: number, y: number): void;
    moveTo(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;
    roundRect(
        x: number,
        y: number,
        w: number,
        h: number,
        radii?: number | DOMPointInit | (number | DOMPointInit)[],
    ): void;
    getLineDash(): number[];
    setLineDash(segments: Iterable<number>): void;
    clearRect(x: number, y: number, w: number, h: number): void;
    fillRect(x: number, y: number, w: number, h: number): void;
    strokeRect(x: number, y: number, w: number, h: number): void;
    reset(): void;
    restore(): void;
    save(): void;
    fillText(text: string, x: number, y: number, maxWidth?: number): void;
    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
    getTransform(): DOMMatrix;
    resetTransform(): void;
    rotate(angle: number): void;
    rotate(radians: number, origin?: PointType): void;
    rotate(radians: number, origin?: [number, number]): void;
    rotate(radians: number, originX?: number, originY?: number): void;
    scale(x: number, y: number): void;
    scale(x: number, y: number, origin?: PointType): void;
    scale(x: number, y: number, origin?: [number, number]): void;
    scale(x: number, y: number, originX?: number, originY?: number): void;
    setTransform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    setTransform(transform?: Matrix): void;
    transform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    transform(transform: Matrix): void;
    translate(x: number, y: number): void;
    createProjection(quad: QuadOrRect, basis?: QuadOrRect): DOMMatrix;
    conicCurveTo(
        cpx: number,
        cpy: number,
        x: number,
        y: number,
        weight: number,
    ): void;
    measureText(text: string, maxWidth?: number): TextMetrics;
    outlineText(text: string, maxWidth?: number): Path2D;
}

Hierarchy (View Summary)

Index

Accessors

currentTransform

Accessors

currentTransform

get currentTransform(): DOMMatrix
Returns DOMMatrix
set currentTransform(matrix: Matrix): void
Parameters
- matrix: Matrix
Returns void

Methods

drawImage

drawImage(image: CanvasDrawable, dx: number, dy: number): void
Parameters
- image: CanvasDrawable
- dx: number
- dy: number
Returns void
Inherited from CanvasDrawImage.drawImage
drawImage(
    image: CanvasDrawable,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
): void
Parameters
- image: CanvasDrawable
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawImage
drawImage(
    image: CanvasDrawable,
    sx: number,
    sy: number,
    sw: number,
    sh: number,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
): void
Parameters
- image: CanvasDrawable
- sx: number
- sy: number
- sw: number
- sh: number
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawImage

drawCanvas

drawCanvas(image: Canvas, dx: number, dy: number): void
Parameters
- image: Canvas
- dx: number
- dy: number
Returns void
Inherited from CanvasDrawImage.drawCanvas
drawCanvas(image: Canvas, dx: number, dy: number, dw: number, dh: number): void
Parameters
- image: Canvas
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawCanvas
drawCanvas(
    image: Canvas,
    sx: number,
    sy: number,
    sw: number,
    sh: number,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
): void
Parameters
- image: Canvas
- sx: number
- sy: number
- sw: number
- sh: number
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawCanvas

beginPath

beginPath(): void
MDN Reference

Returns void
Inherited from CanvasDrawPath.beginPath

clip

clip(fillRule?: CanvasFillRule): void
MDN Reference
Parameters
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.clip
clip(path: Path2D, fillRule?: CanvasFillRule): void
Parameters
- path: Path2D
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.clip

fill

fill(fillRule?: CanvasFillRule): void
MDN Reference
Parameters
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.fill
fill(path: Path2D, fillRule?: CanvasFillRule): void
Parameters
- path: Path2D
- OptionalfillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.fill

isPointInPath

isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean
MDN Reference
Parameters
- x: number
- y: number
- OptionalfillRule: CanvasFillRule
Returns boolean
Inherited from CanvasDrawPath.isPointInPath
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

isPointInStroke

isPointInStroke(x: number, y: number): boolean
MDN Reference
Parameters
- x: number
- y: number
Returns boolean
Inherited from CanvasDrawPath.isPointInStroke
isPointInStroke(path: Path2D, x: number, y: number): boolean
Parameters
- path: Path2D
- x: number
- y: number
Returns boolean
Inherited from CanvasDrawPath.isPointInStroke

stroke

stroke(): void
MDN Reference

Returns void
Inherited from CanvasDrawPath.stroke
stroke(path: Path2D): void
Parameters
- path: Path2D
Returns void
Inherited from CanvasDrawPath.stroke

createConicGradient

createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
MDN Reference
Parameters
- startAngle: number
- x: number
- y: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createConicGradient

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

createPattern

createPattern(
image: CanvasPatternSource,
repetition: null | string,
): null | CanvasPattern
MDN Reference
Parameters
- image: CanvasPatternSource
- repetition: null | string
Returns null | CanvasPattern
Inherited from CanvasFillStrokeStyles.createPattern

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

createTexture

createTexture(spacing: Offset, options?: CreateTextureOptions): CanvasTexture
Skia Canvas Docs
Parameters
- spacing: Offset
- Optionaloptions: CreateTextureOptions
Returns CanvasTexture
Inherited from CanvasFillStrokeStyles.createTexture

createImageData

createImageData(
    width: number,
    height: number,
    settings?: ImageDataSettings,
): ImageData
MDN Reference
Parameters
- width: number
- height: number
- Optionalsettings: ImageDataSettings
Returns ImageData
Inherited from CanvasImageData.createImageData
createImageData(imagedata: ImageData): ImageData
Parameters
- imagedata: ImageData
Returns ImageData
Inherited from CanvasImageData.createImageData

getImageData

getImageData(
    x: number,
    y: number,
    width: number,
    height: number,
    settings?: ImageDataSettings,
): ImageData
MDN Reference
Parameters
- x: number
- y: number
- width: number
- height: number
- Optionalsettings: ImageDataSettings
Returns ImageData
Inherited from CanvasImageData.getImageData

putImageData

putImageData(imagedata: ImageData, dx: number, dy: number): void
MDN Reference
Parameters
- imagedata: ImageData
- dx: number
- dy: number
Returns void
Inherited from CanvasImageData.putImageData
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

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

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

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

closePath

closePath(): void
MDN Reference

Returns void
Inherited from CanvasPath.closePath

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

lineTo

lineTo(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.lineTo

moveTo

moveTo(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.moveTo

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

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

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

getLineDash

getLineDash(): number[]
MDN Reference

Returns number[]
Inherited from CanvasPathDrawingStyles.getLineDash

setLineDash

setLineDash(segments: Iterable<number>): void
MDN Reference
Parameters
- segments: Iterable<number>
Returns void
Inherited from CanvasPathDrawingStyles.setLineDash

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

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

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

reset

reset(): void
MDN Reference

Returns void
Inherited from CanvasState.reset

restore

restore(): void
MDN Reference

Returns void
Inherited from CanvasState.restore

save

save(): void
MDN Reference

Returns void
Inherited from CanvasState.save

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

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

getTransform

getTransform(): DOMMatrix
MDN Reference

Returns DOMMatrix
Inherited from CanvasTransform.getTransform

resetTransform

resetTransform(): void
MDN Reference

Returns void
Inherited from CanvasTransform.resetTransform

rotate

rotate(angle: number): void
MDN Reference
Parameters
- angle: number
Returns void
Inherited from CanvasTransform.rotate
rotate(radians: number, origin?: PointType): void
Parameters
- radians: number
- Optionalorigin: PointType
Returns void
Inherited from CanvasTransform.rotate
rotate(radians: number, origin?: [number, number]): void
Parameters
- radians: number
- Optionalorigin: [number, number]
Returns void
Inherited from CanvasTransform.rotate
rotate(radians: number, originX?: number, originY?: number): void
Parameters
- radians: number
- OptionaloriginX: number
- OptionaloriginY: number
Returns void
Inherited from CanvasTransform.rotate

scale

scale(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasTransform.scale
scale(x: number, y: number, origin?: PointType): void
Parameters
- x: number
- y: number
- Optionalorigin: PointType
Returns void
Inherited from CanvasTransform.scale
scale(x: number, y: number, origin?: [number, number]): void
Parameters
- x: number
- y: number
- Optionalorigin: [number, number]
Returns void
Inherited from CanvasTransform.scale
scale(x: number, y: number, originX?: number, originY?: number): void
Parameters
- x: number
- y: number
- OptionaloriginX: number
- OptionaloriginY: number
Returns void
Inherited from CanvasTransform.scale

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
setTransform(transform?: Matrix): void
transform argument extensions (accept DOMMatrix & matrix-like objectx, not just param lists)
Parameters
- Optionaltransform: Matrix
Returns void
Inherited from CanvasTransform.setTransform

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
transform(transform: Matrix): void
Parameters
- transform: Matrix
Returns void
Inherited from CanvasTransform.transform

translate

translate(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasTransform.translate

createProjection

createProjection(quad: QuadOrRect, basis?: QuadOrRect): DOMMatrix
Parameters
- quad: QuadOrRect
- Optionalbasis: QuadOrRect
Returns DOMMatrix

conicCurveTo

conicCurveTo(
    cpx: number,
    cpy: number,
    x: number,
    y: number,
    weight: number,
): void
Parameters
- cpx: number
- cpy: number
- x: number
- y: number
- weight: number
Returns void

measureText

measureText(text: string, maxWidth?: number): TextMetrics
MDN Reference
Parameters
- text: string
- OptionalmaxWidth: number
Returns TextMetrics
Overrides CanvasText.measureText

outlineText

outlineText(text: string, maxWidth?: number): Path2D
Parameters
- text: string
- OptionalmaxWidth: number
Returns Path2D

Properties

globalAlpha

globalAlpha: number

Interface CanvasRenderingContext2D

Hierarchy (View Summary)

Index

Accessors

Methods

Properties

Accessors

currentTransform

Returns DOMMatrix

Parameters

Returns void

Methods

drawImage

Parameters

Returns void

Parameters

Returns void

Parameters

Returns void

drawCanvas

Parameters

Returns void

Parameters

Returns void

Parameters

Returns void

beginPath

Returns void

clip

Parameters

Returns void

Parameters

Returns void

fill

Parameters

Returns void

Parameters

Returns void

isPointInPath

Parameters

Returns boolean

Parameters

Returns boolean

isPointInStroke

Parameters

Returns boolean

Parameters

Returns boolean

stroke

Returns void

Parameters

Returns void

createConicGradient

Parameters

Returns CanvasGradient

createLinearGradient

Parameters

Returns CanvasGradient

createPattern

Parameters

Returns null | CanvasPattern

createRadialGradient

Parameters

Returns CanvasGradient

createTexture

Parameters

Returns CanvasTexture

createImageData

Parameters

Returns ImageData

Parameters

Returns ImageData

getImageData

Parameters

Returns ImageData

putImageData

Parameters

Returns void

Parameters

Returns void