Class CanvasRenderingContext2D

constructor

• new CanvasRenderingContext2D(canvas): CanvasRenderingContext2D

• Parameters

  • canvas: Canvas

  Returns CanvasRenderingContext2D

canvas

direction

filter

fontKerning

globalCompositeOperation

imageSmoothingEnabled

imageSmoothingQuality

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

textAlign

textBaseline

fillStyle

• get fillStyle(): string | CanvasGradient | CanvasPattern

• Returns string | CanvasGradient | CanvasPattern

• set fillStyle(v): void

• Parameters

  • v: string | CanvasGradient | CanvasPattern

  Returns void

font

• get font(): string

• Returns string

• set font(v): void

• Parameters

  • v: string

  Returns void

globalAlpha

• get globalAlpha(): number

• Returns number

• set globalAlpha(v): void

• Parameters

  • v: number

  Returns void

lineCap

• get lineCap(): CanvasLineCap

• Returns CanvasLineCap

• set lineCap(v): void

• Parameters

  • v: CanvasLineCap

  Returns void

lineDashOffset

• get lineDashOffset(): number

• Returns number

• set lineDashOffset(v): void

• Parameters

  • v: number

  Returns void

lineJoin

• get lineJoin(): CanvasLineJoin

• Returns CanvasLineJoin

• set lineJoin(v): void

• Parameters

  • v: CanvasLineJoin

  Returns void

lineWidth

• get lineWidth(): number

• Returns number

• set lineWidth(v): void

• Parameters

  • v: number

  Returns void

miterLimit

• get miterLimit(): number

• Returns number

• set miterLimit(v): void

• Parameters

  • v: number

  Returns void

strokeStyle

• get strokeStyle(): string | CanvasGradient | CanvasPattern

• Returns string | CanvasGradient | CanvasPattern

• set strokeStyle(v): void

• Parameters

  • v: string | CanvasGradient | CanvasPattern

  Returns void

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

• beginPath(): void

• Returns void

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

• clip(fillRule?): void

• Parameters

  • Optional fillRule: CanvasFillRule

  Returns void

• clip(path, fillRule?): void

• Parameters

  • path: Path2D

  • Optional fillRule: CanvasFillRule

  Returns void

closePath

• closePath(): void

• Returns void

createConicGradient

• createConicGradient(startAngle, x, y): CanvasGradient

• Parameters

  • startAngle: number

  • x: number

  • y: number

  Returns CanvasGradient

createImageData

• createImageData(sw, sh, settings?): ImageData

• Parameters

  • sw: number

  • sh: number

  • Optional settings: ImageDataSettings

  Returns ImageData

• createImageData(imagedata): ImageData

• Parameters

  • imagedata: ImageData

  Returns ImageData

createLinearGradient

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

• Parameters

  • x0: number

  • y0: number

  • x1: number

  • y1: number

  Returns CanvasGradient

createPattern

• createPattern(image, repetition): null | CanvasPattern

• Parameters

  • image: CanvasImageSource

  • repetition: null | string

  Returns null | CanvasPattern

createRadialGradient

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

• Parameters

  • x0: number

  • y0: number

  • r0: number

  • x1: number

  • y1: number

  • r1: number

  Returns CanvasGradient

drawFocusIfNeeded

• drawFocusIfNeeded(element): void

• Parameters

  • element: Element

  Returns void

• drawFocusIfNeeded(path, element): void

• Parameters

  • path: Path2D

  • element: Element

  Returns void

drawImage

• drawImage(image, dx, dy): void

• Parameters

  • image: CanvasImageSource

  • dx: number

  • dy: number

  Returns void

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

• Parameters

  • image: CanvasImageSource

  • dx: number

  • dy: number

  • dw: number

  • dh: number

  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

• Parameters

  • x: number

  • y: number

  • radiusX: number

  • radiusY: number

  • rotation: number

  • startAngle: number

  • endAngle: number

  • Optional counterclockwise: boolean

  Returns void

fill

• fill(fillRule?): void

• Parameters

  • Optional fillRule: CanvasFillRule

  Returns void

• fill(path, fillRule?): void

• Parameters

  • path: Path2D

  • Optional fillRule: CanvasFillRule

  Returns void

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

• getContextAttributes(): CanvasRenderingContext2DSettings

• Returns CanvasRenderingContext2DSettings

getImageData

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

• Parameters

  • sx: number

  • sy: number

  • sw: number

  • sh: number

  • Optional settings: ImageDataSettings

  Returns ImageData

getLineDash

• getLineDash(): number[]

• Returns number[]

getTransform

• getTransform(): DOMMatrix

• Returns DOMMatrix

isPointInPath

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

• Parameters

  • x: number

  • y: number

  • Optional fillRule: CanvasFillRule

  Returns boolean

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

• Parameters

  • path: Path2D

  • x: number

  • y: number

  • Optional fillRule: CanvasFillRule

  Returns boolean

isPointInStroke

• isPointInStroke(x, y): boolean

• 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

• Parameters

  • x: number

  • y: number

  Returns void

measureText

• measureText(text): TextMetrics

• Parameters

  • text: string

  Returns TextMetrics

moveTo

• moveTo(x, y): void

• Parameters

  • x: number

  • y: number

  Returns void

putImageData

• putImageData(imagedata, dx, dy): void

• Parameters

  • imagedata: ImageData

  • dx: number

  • dy: number

  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

• resetTransform(): void

• Returns void

restore

• restore(): void

• Returns void

rotate

• rotate(angle): void

• Parameters

  • angle: number

  Returns void

roundRect

• roundRect(x, y, width, height, radii?): void

• Implementation from https://github.com/nilzona/path2d-polyfill

  Parameters

  • x: number

  • y: number

  • width: number

  • height: number

  • radii: number | DOMPointInit | Iterable<number | DOMPointInit> = 0

  Returns void

  Note

  Currently does not support negative width / height values.

save

• save(): void

• Returns void

scale

• scale(x, y): void

• Parameters

  • x: number

  • y: number

  Returns void

setLineDash

• setLineDash(segments): void

• Parameters

  • segments: Iterable<number>

  Returns void

setTransform

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

• Parameters

  • a: number

  • b: number

  • c: number

  • d: number

  • e: number

  • f: number

  Returns void

• setTransform(transform?): void

• Parameters

  • Optional transform: DOMMatrix2DInit

  Returns void

stroke

• stroke(path?): void

• Parameters

  • Optional path: Path2D

  Returns void

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

• translate(x, y): void

• Parameters

  • x: number

  • y: number

  Returns void