Options
All
  • Public
  • Public/Protected
  • All
Menu

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.

Hierarchy

Index

Properties

Methods

Properties

Readonly canvas

canvas: HTMLCanvasElement

direction

direction: CanvasDirection

fillStyle

fillStyle: string | CanvasGradient | CanvasPattern

filter

filter: string

font

font: string

globalAlpha

globalAlpha: number

globalCompositeOperation

globalCompositeOperation: string

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

  • Parameters

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

    Returns void

arcTo

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

  • Parameters

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

    Returns void

beginPath

  • beginPath(): void

bezierCurveTo

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

  • 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

  • Parameters

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

    Returns void

clip

  • clip(fillRule?: "evenodd" | "nonzero"): void
  • clip(path: Path2D, fillRule?: "evenodd" | "nonzero"): void

  • Parameters

    • Optional fillRule: "evenodd" | "nonzero"

    Returns void

  • Parameters

    • path: Path2D
    • Optional fillRule: "evenodd" | "nonzero"

    Returns void

closePath

  • closePath(): void

  • Returns void

createImageData

createLinearGradient

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

createPattern

createRadialGradient

  • createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient

drawFocusIfNeeded

drawImage

  • 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

  • ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void

  • Parameters

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

    Returns void

fill

  • fill(fillRule?: "evenodd" | "nonzero"): void
  • fill(path: Path2D, fillRule?: "evenodd" | "nonzero"): void

  • Parameters

    • Optional fillRule: "evenodd" | "nonzero"

    Returns void

  • Parameters

    • path: Path2D
    • Optional fillRule: "evenodd" | "nonzero"

    Returns void

fillRect

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

  • Parameters

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

    Returns void

fillText

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

  • Parameters

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

    Returns void

getImageData

  • getImageData(sx: number, sy: number, sw: number, sh: number): ImageData

getLineDash

  • getLineDash(): number[]

  • Returns number[]

getTransform

isPointInPath

  • isPointInPath(x: number, y: number, fillRule?: "evenodd" | "nonzero"): boolean
  • isPointInPath(path: Path2D, x: number, y: number, fillRule?: "evenodd" | "nonzero"): boolean

  • Parameters

    • x: number
    • y: number
    • Optional fillRule: "evenodd" | "nonzero"

    Returns boolean

  • Parameters

    • path: Path2D
    • x: number
    • y: number
    • Optional fillRule: "evenodd" | "nonzero"

    Returns boolean

isPointInStroke

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

lineTo

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

  • Parameters

    • x: number
    • y: number

    Returns void

measureText

moveTo

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

  • Parameters

    • x: number
    • y: number

    Returns void

putImageData

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

  • Parameters

    Returns void

  • Parameters

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

    Returns void

quadraticCurveTo

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

  • Parameters

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

    Returns void

rect

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

  • Parameters

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

    Returns void

resetTransform

  • resetTransform(): void

restore

  • restore(): void

  • Returns void

rotate

  • rotate(angle: number): void

  • Parameters

    • angle: number

    Returns void

save

  • save(): void

  • Returns void

scale

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

  • Parameters

    • x: number
    • y: number

    Returns void

scrollPathIntoView

  • scrollPathIntoView(): void
  • scrollPathIntoView(path: Path2D): void

setLineDash

  • setLineDash(segments: number[]): void
  • setLineDash(segments: Iterable<number>): void

  • Parameters

    • segments: number[]

    Returns void

  • Parameters

    Returns void

setTransform

  • setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
  • setTransform(transform?: DOMMatrix2DInit): void

stroke

  • stroke(): void
  • stroke(path: Path2D): void

  • Returns void

  • Parameters

    Returns void

strokeRect

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

  • Parameters

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

    Returns void

strokeText

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

  • Parameters

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

    Returns void

transform

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

  • Parameters

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

    Returns void

translate

  • translate(x: number, y: number): void

  • Parameters

    • x: number
    • y: number

    Returns void

Generated using TypeDoc