Search

Search something to see results

GitHub

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 {
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    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;
    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;
    fillStyle: string | CanvasGradient | CanvasPattern;
    strokeStyle: string | CanvasGradient | CanvasPattern;
    createConicGradient(
        startAngle: number,
        x: number,
        y: number,
    ): CanvasGradient;
    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;
    filter: string;
    createImageData(
        sw: number,
        sh: number,
        settings?: ImageDataSettings,
    ): ImageData;
    createImageData(imagedata: ImageData): ImageData;
    getImageData(
        sx: number,
        sy: number,
        sw: number,
        sh: 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;
    imageSmoothingEnabled: boolean;
    imageSmoothingQuality: ImageSmoothingQuality;
    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;
    roundRect(
        x: number,
        y: number,
        w: number,
        h: number,
        radii?: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>,
    ): void;
    lineCap: CanvasLineCap;
    lineDashOffset: number;
    lineJoin: CanvasLineJoin;
    lineWidth: number;
    miterLimit: number;
    getLineDash(): number[];
    setLineDash(segments: number[]): void;
    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;
    canvas: HTMLCanvasElement;
    getContextAttributes(): CanvasRenderingContext2DSettings;
    shadowBlur: number;
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    isContextLost(): boolean;
    reset(): void;
    restore(): void;
    save(): void;
    fillText(text: string, x: number, y: number, maxWidth?: number): void;
    measureText(text: string): TextMetrics;
    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
    direction: CanvasDirection;
    font: string;
    fontKerning: CanvasFontKerning;
    fontStretch: CanvasFontStretch;
    fontVariantCaps: CanvasFontVariantCaps;
    letterSpacing: string;
    textAlign: CanvasTextAlign;
    textBaseline: CanvasTextBaseline;
    textRendering: CanvasTextRendering;
    wordSpacing: string;
    getTransform(): DOMMatrix;
    resetTransform(): void;
    rotate(angle: number): void;
    scale(x: number, y: number): void;
    setTransform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    setTransform(transform?: DOMMatrix2DInit): void;
    transform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    translate(x: number, y: number): void;
    drawFocusIfNeeded(element: Element): void;
    drawFocusIfNeeded(path: Path2D, element: Element): void;
}

Hierarchy (View Summary)

Index

Properties

<internal>.CanvasRenderingContext2D.globalAlpha<internal>.CanvasRenderingContext2D.globalCompositeOperation<internal>.CanvasRenderingContext2D.fillStyle<internal>.CanvasRenderingContext2D.strokeStyle<internal>.CanvasRenderingContext2D.filter<internal>.CanvasRenderingContext2D.imageSmoothingEnabled<internal>.CanvasRenderingContext2D.imageSmoothingQuality<internal>.CanvasRenderingContext2D.lineCap<internal>.CanvasRenderingContext2D.lineDashOffset<internal>.CanvasRenderingContext2D.lineJoin<internal>.CanvasRenderingContext2D.lineWidth<internal>.CanvasRenderingContext2D.miterLimit<internal>.CanvasRenderingContext2D.canvas<internal>.CanvasRenderingContext2D.shadowBlur<internal>.CanvasRenderingContext2D.shadowColor<internal>.CanvasRenderingContext2D.shadowOffsetX<internal>.CanvasRenderingContext2D.shadowOffsetY<internal>.CanvasRenderingContext2D.direction<internal>.CanvasRenderingContext2D.font<internal>.CanvasRenderingContext2D.fontKerning<internal>.CanvasRenderingContext2D.fontStretch<internal>.CanvasRenderingContext2D.fontVariantCaps<internal>.CanvasRenderingContext2D.letterSpacing<internal>.CanvasRenderingContext2D.textAlign<internal>.CanvasRenderingContext2D.textBaseline<internal>.CanvasRenderingContext2D.textRendering<internal>.CanvasRenderingContext2D.wordSpacing

Methods

<internal>.CanvasRenderingContext2D.drawImage<internal>.CanvasRenderingContext2D.beginPath<internal>.CanvasRenderingContext2D.clip<internal>.CanvasRenderingContext2D.fill<internal>.CanvasRenderingContext2D.isPointInPath<internal>.CanvasRenderingContext2D.isPointInStroke<internal>.CanvasRenderingContext2D.stroke<internal>.CanvasRenderingContext2D.createConicGradient<internal>.CanvasRenderingContext2D.createLinearGradient<internal>.CanvasRenderingContext2D.createPattern<internal>.CanvasRenderingContext2D.createRadialGradient<internal>.CanvasRenderingContext2D.createImageData<internal>.CanvasRenderingContext2D.getImageData<internal>.CanvasRenderingContext2D.putImageData<internal>.CanvasRenderingContext2D.arc<internal>.CanvasRenderingContext2D.arcTo<internal>.CanvasRenderingContext2D.bezierCurveTo<internal>.CanvasRenderingContext2D.closePath<internal>.CanvasRenderingContext2D.ellipse<internal>.CanvasRenderingContext2D.lineTo<internal>.CanvasRenderingContext2D.moveTo<internal>.CanvasRenderingContext2D.quadraticCurveTo<internal>.CanvasRenderingContext2D.rect<internal>.CanvasRenderingContext2D.roundRect<internal>.CanvasRenderingContext2D.getLineDash<internal>.CanvasRenderingContext2D.setLineDash<internal>.CanvasRenderingContext2D.clearRect<internal>.CanvasRenderingContext2D.fillRect<internal>.CanvasRenderingContext2D.strokeRect<internal>.CanvasRenderingContext2D.getContextAttributes<internal>.CanvasRenderingContext2D.isContextLost<internal>.CanvasRenderingContext2D.reset<internal>.CanvasRenderingContext2D.restore<internal>.CanvasRenderingContext2D.save<internal>.CanvasRenderingContext2D.fillText<internal>.CanvasRenderingContext2D.measureText<internal>.CanvasRenderingContext2D.strokeText<internal>.CanvasRenderingContext2D.getTransform<internal>.CanvasRenderingContext2D.resetTransform<internal>.CanvasRenderingContext2D.rotate<internal>.CanvasRenderingContext2D.scale<internal>.CanvasRenderingContext2D.setTransform<internal>.CanvasRenderingContext2D.transform<internal>.CanvasRenderingContext2D.translate<internal>.CanvasRenderingContext2D.drawFocusIfNeeded

Properties

globalAlpha: number

MDN Reference

globalCompositeOperation: GlobalCompositeOperation

MDN Reference

fillStyle: string | CanvasGradient | CanvasPattern

MDN Reference

strokeStyle: string | CanvasGradient | CanvasPattern

MDN Reference

filter: string

MDN Reference

imageSmoothingEnabled: boolean

MDN Reference

imageSmoothingQuality: ImageSmoothingQuality

MDN Reference

lineCap: CanvasLineCap

MDN Reference

lineDashOffset: number

MDN Reference

lineJoin: CanvasLineJoin

MDN Reference

lineWidth: number

MDN Reference

miterLimit: number

MDN Reference

canvas: HTMLCanvasElement

MDN Reference

shadowBlur: number

MDN Reference

shadowColor: string

MDN Reference

shadowOffsetX: number

MDN Reference

shadowOffsetY: number

MDN Reference

direction: CanvasDirection

MDN Reference

font: string

MDN Reference

fontKerning: CanvasFontKerning

MDN Reference

fontStretch: CanvasFontStretch

MDN Reference

fontVariantCaps: CanvasFontVariantCaps

MDN Reference

letterSpacing: string

MDN Reference

textAlign: CanvasTextAlign

MDN Reference

textBaseline: CanvasTextBaseline

MDN Reference

textRendering: CanvasTextRendering

MDN Reference

wordSpacing: string

MDN Reference

Methods

drawImage(image: CanvasImageSource, dx: number, dy: number): void

MDN Reference

Parameters

Returns void

drawImage(
    image: CanvasImageSource,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
): void

Parameters

Returns void

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

beginPath(): void

MDN Reference

Returns void

clip(fillRule?: CanvasFillRule): void

MDN Reference

Parameters

Returns void

clip(path: Path2D, fillRule?: CanvasFillRule): void

Parameters

Returns void

fill(fillRule?: CanvasFillRule): void

MDN Reference

Parameters

Returns void

fill(path: Path2D, fillRule?: CanvasFillRule): void

Parameters

Returns void

isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean

MDN Reference

Parameters

Returns boolean

isPointInPath(
    path: Path2D,
    x: number,
    y: number,
    fillRule?: CanvasFillRule,
): boolean

Parameters

Returns boolean

isPointInStroke(x: number, y: number): boolean

MDN Reference

Parameters

  • x: number
  • y: number

Returns boolean

isPointInStroke(path: Path2D, x: number, y: number): boolean

Parameters

  • path: Path2D
  • x: number
  • y: number

Returns boolean

stroke(): void

MDN Reference

Returns void

stroke(path: Path2D): void

Parameters

Returns void

createConicGradient(startAngle: number, x: number, y: number): CanvasGradient

MDN Reference

Parameters

  • startAngle: number
  • x: number
  • y: number

Returns CanvasGradient

createLinearGradient(
    x0: number,
    y0: number,
    x1: number,
    y1: number,
): CanvasGradient

MDN Reference

Parameters

  • x0: number
  • y0: number
  • x1: number
  • y1: number

Returns CanvasGradient

createPattern(
    image: CanvasImageSource,
    repetition: null | string,
): null | CanvasPattern

MDN Reference

Parameters

Returns null | CanvasPattern

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

createImageData(sw: number, sh: number, settings?: ImageDataSettings): ImageData

MDN Reference

Parameters

Returns ImageData

createImageData(imagedata: ImageData): ImageData

Parameters

Returns ImageData

getImageData(
    sx: number,
    sy: number,
    sw: number,
    sh: number,
    settings?: ImageDataSettings,
): ImageData

MDN Reference

Parameters

Returns ImageData

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

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

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

closePath(): void

MDN Reference

Returns void

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

lineTo(x: number, y: number): void

MDN Reference

Parameters

  • x: number
  • y: number

Returns void

moveTo(x: number, y: number): void

MDN Reference

Parameters

  • x: number
  • y: number

Returns void

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void

MDN Reference

Parameters

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

Returns void

rect(x: number, y: number, w: number, h: number): void

MDN Reference

Parameters

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

Returns void

roundRect(
    x: number,
    y: number,
    w: number,
    h: number,
    radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void

MDN Reference

Parameters

Returns void

roundRect(
    x: number,
    y: number,
    w: number,
    h: number,
    radii?: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>,
): void

MDN Reference

Parameters

Returns void

getLineDash(): number[]

MDN Reference

Returns number[]

setLineDash(segments: number[]): void

MDN Reference

Parameters

  • segments: number[]

Returns void

setLineDash(segments: Iterable<number>): void

MDN Reference

Parameters

Returns void

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

MDN Reference

Parameters

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

Returns void

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

MDN Reference

Parameters

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

Returns void

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

MDN Reference

Parameters

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

Returns void

getContextAttributes(): CanvasRenderingContext2DSettings

MDN Reference

Returns CanvasRenderingContext2DSettings

isContextLost(): boolean

MDN Reference

Returns boolean

reset(): void

MDN Reference

Returns void

restore(): void

MDN Reference

Returns void

save(): void

MDN Reference

Returns void

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

MDN Reference

Parameters

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

Returns void

measureText(text: string): TextMetrics

MDN Reference

Parameters

  • text: string

Returns TextMetrics

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

MDN Reference

Parameters

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

Returns void

getTransform(): DOMMatrix

MDN Reference

Returns DOMMatrix

resetTransform(): void

MDN Reference

Returns void

rotate(angle: number): void

MDN Reference

Parameters

  • angle: number

Returns void

scale(x: number, y: number): void

MDN Reference

Parameters

  • x: number
  • y: number

Returns void

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

setTransform(transform?: DOMMatrix2DInit): void

Parameters

Returns void

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(x: number, y: number): void

MDN Reference

Parameters

  • x: number
  • y: number

Returns void

drawFocusIfNeeded(element: Element): void

MDN Reference

Parameters

Returns void

drawFocusIfNeeded(path: Path2D, element: Element): void

Parameters

Returns void