Chartbreaker
    Preparing search index...

    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;
        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: null | string,
        ): null | CanvasPattern;
        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

    Properties

    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

    Methods

    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

    Properties

    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: 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

    Methods

    • 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

      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

      Returns number[]

    • MDN Reference

      Parameters

      • x: number
      • y: number

      Returns void

    • MDN Reference

      Parameters

      • x: number
      • y: 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

      • segments: number[]

      Returns void

    • MDN Reference

      Parameters

      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

    Settings

    Member Visibility

    On This Page

    Properties
    Methods