Interface CanvasRenderingContext2D

    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: CanvasImageSourceWebCodecs,
            repetition: string,
        ): 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: CanvasImageSourceWebCodecs, dx: number, dy: number): void;
        drawImage(
            image: CanvasImageSourceWebCodecs,
            dx: number,
            dy: number,
            dw: number,
            dh: number,
        ): void;
        drawImage(
            image: CanvasImageSourceWebCodecs,
            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>,
        ): 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

    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

    Readonlycanvas

    canvas: HTMLCanvasElement

    MDN Reference

    direction

    direction: CanvasDirection

    MDN Reference

    fillStyle

    fillStyle: string | CanvasGradient | CanvasPattern

    MDN Reference

    filter

    filter: string

    MDN Reference

    font

    font: string

    MDN Reference

    fontKerning

    fontKerning: CanvasFontKerning

    MDN Reference

    fontStretch

    fontStretch: CanvasFontStretch

    MDN Reference

    fontVariantCaps

    fontVariantCaps: CanvasFontVariantCaps

    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

    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

    beginPath

    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

    clearRect

    • clearRect(x: number, y: number, w: number, h: number): void

    • MDN Reference

      Parameters

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

      Returns void

    clip

    closePath

    createConicGradient

    createImageData

    createLinearGradient

    createPattern

    createRadialGradient

    drawFocusIfNeeded

    drawImage

    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

    fill

    fillRect

    • fillRect(x: number, y: number, w: number, h: number): void

    • MDN Reference

      Parameters

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

      Returns void

    fillText

    • fillText(text: string, x: number, y: number, maxWidth?: number): void

    • MDN Reference

      Parameters

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

      Returns void

    getContextAttributes

    getImageData

    getLineDash

    getTransform

    isContextLost

    isPointInPath

    isPointInStroke

    lineTo

    measureText

    moveTo

    putImageData

    • putImageData(imagedata: ImageData, dx: number, dy: number): void

    • MDN Reference

      Parameters

      Returns void

    • 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

    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

    reset

    resetTransform

    restore

    rotate

    roundRect

    save

    scale

    setLineDash

    setTransform

    stroke

    strokeRect

    • strokeRect(x: number, y: number, w: number, h: number): void

    • MDN Reference

      Parameters

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

      Returns void

    strokeText

    • strokeText(text: string, x: number, y: number, maxWidth?: number): void

    • MDN Reference

      Parameters

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

      Returns void

    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

    translate

    Settings

    Member Visibility

    On This Page

    Properties
    Methods