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: 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;
    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 (view full)

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 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, y, radius, startAngle, endAngle, counterclockwise?): void

  • MDN Reference

    Parameters

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

    Returns void

arcTo

  • arcTo(x1, y1, x2, y2, radius): void

  • MDN Reference

    Parameters

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

    Returns void

beginPath

bezierCurveTo

  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void

  • MDN Reference

    Parameters

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

    Returns void

clearRect

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

  • MDN Reference

    Parameters

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

    Returns void

clip

  • clip(fillRule?): void

  • MDN Reference

    Parameters

    Returns void

  • clip(path, fillRule?): void

  • Parameters

    Returns void

closePath

  • closePath(): void

  • MDN Reference

    Returns void

createConicGradient

createImageData

createLinearGradient

createPattern

createRadialGradient

drawFocusIfNeeded

drawImage

  • drawImage(image, dx, dy): void

  • MDN Reference

    Parameters

    Returns void

  • drawImage(image, dx, dy, dw, dh): void

  • Parameters

    Returns void

  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): void

  • Parameters

    • image: CanvasImageSource
    • sx: number
    • sy: number
    • sw: number
    • sh: number
    • dx: number
    • dy: number
    • dw: number
    • dh: number

    Returns void

ellipse

  • ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void

  • MDN Reference

    Parameters

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

    Returns void

fill

  • fill(fillRule?): void

  • MDN Reference

    Parameters

    Returns void

  • fill(path, fillRule?): void

  • Parameters

    Returns void

fillRect

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

  • MDN Reference

    Parameters

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

    Returns void

fillText

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

  • MDN Reference

    Parameters

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

    Returns void

getContextAttributes

getImageData

getLineDash

  • getLineDash(): number[]

  • MDN Reference

    Returns number[]

getTransform

isPointInPath

  • isPointInPath(x, y, fillRule?): boolean

  • MDN Reference

    Parameters

    Returns boolean

  • isPointInPath(path, x, y, fillRule?): boolean

  • Parameters

    Returns boolean

isPointInStroke

  • isPointInStroke(x, y): boolean

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns boolean

  • isPointInStroke(path, x, y): boolean

  • Parameters

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

    Returns boolean

lineTo

  • lineTo(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

measureText

moveTo

  • moveTo(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

putImageData

  • putImageData(imagedata, dx, dy): void

  • MDN Reference

    Parameters

    Returns void

  • putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight): void

  • Parameters

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

    Returns void

quadraticCurveTo

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

  • MDN Reference

    Parameters

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

    Returns void

rect

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

  • MDN Reference

    Parameters

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

    Returns void

reset

  • reset(): void

  • MDN Reference

    Returns void

resetTransform

restore

  • restore(): void

  • MDN Reference

    Returns void

rotate

  • rotate(angle): void

  • MDN Reference

    Parameters

    • angle: number

    Returns void

roundRect

  • roundRect(x, y, w, h, radii?): void

  • MDN Reference

    Parameters

    Returns void

  • roundRect(x, y, w, h, radii?): void

  • MDN Reference

    Parameters

    Returns void

save

  • save(): void

  • MDN Reference

    Returns void

scale

  • scale(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

setLineDash

  • setLineDash(segments): void

  • MDN Reference

    Parameters

    • segments: number[]

    Returns void

  • setLineDash(segments): void

  • MDN Reference

    Parameters

    Returns void

setTransform

  • setTransform(a, b, c, d, e, f): void

  • MDN Reference

    Parameters

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

    Returns void

  • setTransform(transform?): void

  • Parameters

    Returns void

stroke

  • stroke(): void

  • MDN Reference

    Returns void

  • stroke(path): void

  • Parameters

    Returns void

strokeRect

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

  • MDN Reference

    Parameters

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

    Returns void

strokeText

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

  • MDN Reference

    Parameters

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

    Returns void

transform

  • transform(a, b, c, d, e, f): void

  • MDN Reference

    Parameters

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

    Returns void

translate

  • translate(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

Settings

Member Visibility

On This Page

Properties
Methods