Join us online - 19th of November
Save your spot

Interface CanvasRenderingContext2D

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for drawing shapes, text, images, and other objects.

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;
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
    beginPath(): 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;
    clip(fillRule?: CanvasFillRule): void;
    clip(path: Path2D, fillRule?: CanvasFillRule): void;
    closePath(): void;
    createConicGradient(
        startAngle: number,
        x: number,
        y: number,
    ): CanvasGradient;
    createImageData(
        sw: number,
        sh: number,
        settings?: ImageDataSettings,
    ): ImageData;
    createImageData(imageData: ImageData): ImageData;
    createLinearGradient(
        x0: number,
        y0: number,
        x1: number,
        y1: number,
    ): CanvasGradient;
    createPattern(
        image: CanvasImageSource,
        repetition: string | null,
    ): CanvasPattern | null;
    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;
    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;
    fillRect(x: number, y: number, w: number, h: 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;
    getLineDash(): number[];
    getTransform(): DOMMatrix;
    isContextLost(): 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;
    lineTo(x: number, y: number): void;
    measureText(text: string): TextMetrics;
    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;
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    rect(x: number, y: number, w: number, h: number): void;
    reset(): void;
    resetTransform(): void;
    restore(): 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;
    save(): void;
    scale(x: number, y: number): void;
    setLineDash(segments: number[]): void;
    setLineDash(segments: Iterable<number>): 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;
    strokeRect(x: number, y: number, w: number, h: 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;
    translate(x: number, y: number): void;
}

Hierarchy (View Summary)

Index
canvas 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
arc arcTo beginPath bezierCurveTo clearRect clip closePath createConicGradient createImageData createLinearGradient createPattern createRadialGradient drawFocusIfNeeded drawImage ellipse fill fillRect fillText getContextAttributes getImageData getLineDash getTransform isContextLost isPointInPath isPointInStroke lineTo measureText moveTo putImageData quadraticCurveTo rect reset resetTransform restore rotate roundRect save scale setLineDash setTransform stroke strokeRect strokeText transform translate
canvas: HTMLCanvasElement

The CanvasRenderingContext2D.canvas property, part of the Canvas API, is a read-only reference to the HTMLCanvasElement object that is associated with a given context. It might be null if there is no associated element.

MDN Reference

direction: CanvasDirection

MDN Reference

fillStyle: string | CanvasGradient | CanvasPattern

MDN Reference

filter: string

MDN Reference

font: string

MDN Reference

fontKerning: CanvasFontKerning

MDN Reference

fontStretch: CanvasFontStretch

MDN Reference

fontVariantCaps: CanvasFontVariantCaps

MDN Reference

globalAlpha: number

MDN Reference

globalCompositeOperation: GlobalCompositeOperation

MDN Reference

imageSmoothingEnabled: boolean

MDN Reference

imageSmoothingQuality: ImageSmoothingQuality

MDN Reference

letterSpacing: string

MDN Reference

lineCap: CanvasLineCap

MDN Reference

lineDashOffset: number

MDN Reference

lineJoin: CanvasLineJoin

MDN Reference

lineWidth: number

MDN Reference

miterLimit: number

MDN Reference

shadowBlur: number

MDN Reference

shadowColor: string

MDN Reference

shadowOffsetX: number

MDN Reference

shadowOffsetY: number

MDN Reference

strokeStyle: string | CanvasGradient | CanvasPattern

MDN Reference

textAlign: CanvasTextAlign

MDN Reference

textBaseline: CanvasTextBaseline

MDN Reference

textRendering: CanvasTextRendering

MDN Reference

wordSpacing: string

MDN Reference

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • radius: number
    • startAngle: number
    • endAngle: number
    • Optionalcounterclockwise: boolean

    Returns void

  • MDN Reference

    Parameters

    • x1: number
    • y1: number
    • x2: number
    • y2: number
    • radius: number

    Returns void

  • MDN Reference

    Parameters

    • cp1x: number
    • cp1y: number
    • cp2x: number
    • cp2y: number
    • x: number
    • y: number

    Returns void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • radiusX: number
    • radiusY: number
    • rotation: number
    • startAngle: number
    • endAngle: number
    • Optionalcounterclockwise: boolean

    Returns void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

  • MDN Reference

    Parameters

    • text: string
    • x: number
    • y: number
    • OptionalmaxWidth: number

    Returns void

  • MDN Reference

    Parameters

    Returns void

  • Parameters

    • imageData: ImageData
    • dx: number
    • dy: number
    • dirtyX: number
    • dirtyY: number
    • dirtyWidth: number
    • dirtyHeight: number

    Returns void

  • MDN Reference

    Parameters

    • cpx: number
    • cpy: number
    • x: number
    • y: number

    Returns void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

  • MDN Reference

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

  • MDN Reference

    Parameters

    • text: string
    • x: number
    • y: number
    • OptionalmaxWidth: number

    Returns void

  • MDN Reference

    Parameters

    • a: number
    • b: number
    • c: number
    • d: number
    • e: number
    • f: number

    Returns void

Was this helpful?