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.

interface CanvasRenderingContext2D {
    canvas: HTMLCanvasElement;
    direction: CanvasDirection;
    fillStyle: string | CanvasGradient | CanvasPattern;
    filter: string;
    font: string;
    fontKerning: CanvasFontKerning;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    imageSmoothingEnabled: boolean;
    imageSmoothingQuality: ImageSmoothingQuality;
    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;
    arc(x, y, radius, startAngle, endAngle, counterclockwise?): void;
    arcTo(x1, y1, x2, y2, radius): void;
    beginPath(): void;
    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void;
    clearRect(x, y, w, h): void;
    clip(fillRule?): void;
    clip(path, fillRule?): void;
    closePath(): void;
    createConicGradient(startAngle, x, y): CanvasGradient;
    createImageData(sw, sh, settings?): ImageData;
    createImageData(imagedata): ImageData;
    createLinearGradient(x0, y0, x1, y1): CanvasGradient;
    createPattern(image, repetition): null | CanvasPattern;
    createRadialGradient(x0, y0, r0, x1, y1, r1): CanvasGradient;
    drawFocusIfNeeded(element): void;
    drawFocusIfNeeded(path, element): void;
    drawImage(image, dx, dy): void;
    drawImage(image, dx, dy, dw, dh): void;
    drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): void;
    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void;
    fill(fillRule?): void;
    fill(path, fillRule?): void;
    fillRect(x, y, w, h): void;
    fillText(text, x, y, maxWidth?): void;
    getContextAttributes(): CanvasRenderingContext2DSettings;
    getImageData(sx, sy, sw, sh, settings?): ImageData;
    getLineDash(): number[];
    getTransform(): DOMMatrix;
    isPointInPath(x, y, fillRule?): boolean;
    isPointInPath(path, x, y, fillRule?): boolean;
    isPointInStroke(x, y): boolean;
    isPointInStroke(path, x, y): boolean;
    lineTo(x, y): void;
    measureText(text): TextMetrics;
    moveTo(x, y): void;
    putImageData(imagedata, dx, dy): void;
    putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight): void;
    quadraticCurveTo(cpx, cpy, x, y): void;
    rect(x, y, w, h): void;
    resetTransform(): void;
    restore(): void;
    rotate(angle): void;
    roundRect(x, y, w, h, radii?): void;
    roundRect(x, y, w, h, radii?): void;
    save(): void;
    scale(x, y): void;
    setLineDash(segments): void;
    setLineDash(segments): void;
    setTransform(a, b, c, d, e, f): void;
    setTransform(transform?): void;
    stroke(): void;
    stroke(path): void;
    strokeRect(x, y, w, h): void;
    strokeText(text, x, y, maxWidth?): void;
    transform(a, b, c, d, e, f): void;
    translate(x, y): void;
}

Hierarchy (view full)

Properties

canvas direction fillStyle filter font fontKerning globalAlpha globalCompositeOperation imageSmoothingEnabled imageSmoothingQuality lineCap lineDashOffset lineJoin lineWidth miterLimit shadowBlur shadowColor shadowOffsetX shadowOffsetY strokeStyle textAlign textBaseline

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 resetTransform restore rotate roundRect save scale setLineDash setTransform stroke strokeRect strokeText transform translate

Properties

Readonly canvas

canvas: HTMLCanvasElement

direction

direction: CanvasDirection

fillStyle

fillStyle: string | CanvasGradient | CanvasPattern

filter

filter: string

font

font: string

fontKerning

fontKerning: CanvasFontKerning

globalAlpha

globalAlpha: number

globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation

imageSmoothingEnabled

imageSmoothingEnabled: boolean

imageSmoothingQuality

imageSmoothingQuality: ImageSmoothingQuality

lineCap

lineCap: CanvasLineCap

lineDashOffset

lineDashOffset: number

lineJoin

lineJoin: CanvasLineJoin

lineWidth

lineWidth: number

miterLimit

miterLimit: number

shadowBlur

shadowBlur: number

shadowColor

shadowColor: string

shadowOffsetX

shadowOffsetX: number

shadowOffsetY

shadowOffsetY: number

strokeStyle

strokeStyle: string | CanvasGradient | CanvasPattern

textAlign

textAlign: CanvasTextAlign

textBaseline

textBaseline: CanvasTextBaseline

Methods

arc

  • arc(x, y, radius, startAngle, endAngle, counterclockwise?): void

  • Parameters

    • x: number
    • y: number
    • radius: number
    • startAngle: number
    • endAngle: number
    • Optional counterclockwise: boolean

    Returns void

arcTo

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

  • Parameters

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

    Returns void

beginPath

bezierCurveTo

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

  • Parameters

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

    Returns void

clearRect

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

  • Parameters

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

    Returns void

clip

closePath

  • closePath(): void

  • Returns void

createConicGradient

createImageData

createLinearGradient

createPattern

createRadialGradient

drawFocusIfNeeded

drawImage

ellipse

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

  • Parameters

    • x: number
    • y: number
    • radiusX: number
    • radiusY: number
    • rotation: number
    • startAngle: number
    • endAngle: number
    • Optional counterclockwise: boolean

    Returns void

fill

fillRect

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

  • Parameters

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

    Returns void

fillText

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

  • Parameters

    • text: string
    • x: number
    • y: number
    • Optional maxWidth: number

    Returns void

getContextAttributes

getImageData

getLineDash

  • getLineDash(): number[]

  • Returns number[]

getTransform

isPointInPath

isPointInStroke

lineTo

  • lineTo(x, y): void

  • Parameters

    • x: number
    • y: number

    Returns void

measureText

moveTo

  • moveTo(x, y): void

  • Parameters

    • x: number
    • y: number

    Returns void

putImageData

  • putImageData(imagedata, dx, dy): void

  • 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

  • Parameters

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

    Returns void

rect

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

  • Parameters

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

    Returns void

resetTransform

restore

rotate

roundRect

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

  • Parameters

    Returns void

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

  • Parameters

    Returns void

save

scale

setLineDash

  • setLineDash(segments): void

  • Parameters

    • segments: number[]

    Returns void

  • setLineDash(segments): void

  • Parameters

    Returns void

setTransform

stroke

strokeRect

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

  • Parameters

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

    Returns void

strokeText

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

  • Parameters

    • text: string
    • x: number
    • y: number
    • Optional maxWidth: number

    Returns void

transform

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

  • Parameters

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

    Returns void

translate

Settings

Member Visibility

Theme

On This Page