Interface CanvasRenderingContext2D

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a

Hierarchy

CanvasCompositing
CanvasDrawImage
CanvasDrawPath
CanvasFillStrokeStyles
CanvasFilters
CanvasImageData
CanvasImageSmoothing
CanvasPath
CanvasPathDrawingStyles
CanvasRect
CanvasShadowStyles
CanvasState
CanvasText
CanvasTextDrawingStyles
CanvasTransform
CanvasUserInterface
- CanvasRenderingContext2D

Properties

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: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
Parameters
- x: number
- y: number
- radius: number
- startAngle: number
- endAngle: number
- Optional counterclockwise: boolean
Returns void
Inherited from CanvasPath.arc
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3578

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
Inherited from CanvasPath.arcTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3579

beginPath

beginPath(): void
Returns void
Inherited from CanvasDrawPath.beginPath
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3523

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
Inherited from CanvasPath.bezierCurveTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3580

clearRect

clearRect(x: number, y: number, w: number, h: number): void
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.clearRect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3612

clip

clip(fillRule?: CanvasFillRule): void
Parameters
- Optional fillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.clip
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3524
clip(path: Path2D, fillRule?: CanvasFillRule): void
Parameters
- path: Path2D
- Optional fillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.clip
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3525

closePath

closePath(): void
Returns void
Inherited from CanvasPath.closePath
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3581

createConicGradient

createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
Parameters
- startAngle: number
- x: number
- y: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createConicGradient
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3539

createImageData

createImageData(sw: number, sh: number, settings?: ImageDataSettings): ImageData
Parameters
- sw: number
- sh: number
- Optional settings: ImageDataSettings
Returns ImageData
Inherited from CanvasImageData.createImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3565
createImageData(imagedata: ImageData): ImageData
Parameters
- imagedata: ImageData
Returns ImageData
Inherited from CanvasImageData.createImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3566

createLinearGradient

createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient
Parameters
- x0: number
- y0: number
- x1: number
- y1: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createLinearGradient
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3540

createPattern

createPattern(image: CanvasImageSource, repetition: string): CanvasPattern
Parameters
- image: CanvasImageSource
- repetition: string
Returns CanvasPattern
Inherited from CanvasFillStrokeStyles.createPattern
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3541

createRadialGradient

createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient
Parameters
- x0: number
- y0: number
- r0: number
- x1: number
- y1: number
- r1: number
Returns CanvasGradient
Inherited from CanvasFillStrokeStyles.createRadialGradient
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3542

drawFocusIfNeeded

drawFocusIfNeeded(element: Element): void
Parameters
- element: Element
Returns void
Inherited from CanvasUserInterface.drawFocusIfNeeded
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3666
drawFocusIfNeeded(path: Path2D, element: Element): void
Parameters
- path: Path2D
- element: Element
Returns void
Inherited from CanvasUserInterface.drawFocusIfNeeded
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3667

drawImage

drawImage(image: CanvasImageSource, dx: number, dy: number): void
Parameters
- image: CanvasImageSource
- dx: number
- dy: number
Returns void
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3517
drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void
Parameters
- image: CanvasImageSource
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3518
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
Inherited from CanvasDrawImage.drawImage
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3519

ellipse

ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
Parameters
- x: number
- y: number
- radiusX: number
- radiusY: number
- rotation: number
- startAngle: number
- endAngle: number
- Optional counterclockwise: boolean
Returns void
Inherited from CanvasPath.ellipse
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3582

fill

fill(fillRule?: CanvasFillRule): void
Parameters
- Optional fillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.fill
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3526
fill(path: Path2D, fillRule?: CanvasFillRule): void
Parameters
- path: Path2D
- Optional fillRule: CanvasFillRule
Returns void
Inherited from CanvasDrawPath.fill
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3527

fillRect

fillRect(x: number, y: number, w: number, h: number): void
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.fillRect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3613

fillText

fillText(text: string, x: number, y: number, maxWidth?: number): void
Parameters
- text: string
- x: number
- y: number
- Optional maxWidth: number
Returns void
Inherited from CanvasText.fillText
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3641

getContextAttributes

getContextAttributes(): CanvasRenderingContext2DSettings
Returns CanvasRenderingContext2DSettings
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3620

getImageData

getImageData(sx: number, sy: number, sw: number, sh: number, settings?: ImageDataSettings): ImageData
Parameters
- sx: number
- sy: number
- sw: number
- sh: number
- Optional settings: ImageDataSettings
Returns ImageData
Inherited from CanvasImageData.getImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3567

getLineDash

getLineDash(): number[]
Returns number[]
Inherited from CanvasPathDrawingStyles.getLineDash
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3596

getTransform

getTransform(): DOMMatrix
Returns DOMMatrix
Inherited from CanvasTransform.getTransform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3655

isPointInPath

isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean
Parameters
- x: number
- y: number
- Optional fillRule: CanvasFillRule
Returns boolean
Inherited from CanvasDrawPath.isPointInPath
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3528
isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean
Parameters
- path: Path2D
- x: number
- y: number
- Optional fillRule: CanvasFillRule
Returns boolean
Inherited from CanvasDrawPath.isPointInPath
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3529

isPointInStroke

isPointInStroke(x: number, y: number): boolean
Parameters
- x: number
- y: number
Returns boolean
Inherited from CanvasDrawPath.isPointInStroke
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3530
isPointInStroke(path: Path2D, x: number, y: number): boolean
Parameters
- path: Path2D
- x: number
- y: number
Returns boolean
Inherited from CanvasDrawPath.isPointInStroke
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3531

lineTo

lineTo(x: number, y: number): void
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.lineTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3583

measureText

measureText(text: string): TextMetrics
Parameters
- text: string
Returns TextMetrics
Inherited from CanvasText.measureText
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3642

moveTo

moveTo(x: number, y: number): void
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.moveTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3584

putImageData

putImageData(imagedata: ImageData, dx: number, dy: number): void
Parameters
- imagedata: ImageData
- dx: number
- dy: number
Returns void
Inherited from CanvasImageData.putImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3568
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
Inherited from CanvasImageData.putImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3569

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Parameters
- cpx: number
- cpy: number
- x: number
- y: number
Returns void
Inherited from CanvasPath.quadraticCurveTo
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3585

rect

rect(x: number, y: number, w: number, h: number): void
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasPath.rect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3586

resetTransform

resetTransform(): void
Returns void
Inherited from CanvasTransform.resetTransform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3656

restore

restore(): void
Returns void
Inherited from CanvasState.restore
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3636

rotate

rotate(angle: number): void
Parameters
- angle: number
Returns void
Inherited from CanvasTransform.rotate
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3657

roundRect

roundRect(x: number, y: number, w: number, h: number, radii?: number | DOMPointInit | (number | DOMPointInit)[]): void
Parameters
- x: number
- y: number
- w: number
- h: number
- Optional radii: number | DOMPointInit | (number | DOMPointInit)[]
Returns void
Inherited from CanvasPath.roundRect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3587
roundRect(x: number, y: number, w: number, h: number, radii?: number | DOMPointInit | Iterable<number | DOMPointInit>): void
Parameters
- x: number
- y: number
- w: number
- h: number
- Optional radii: number | DOMPointInit | Iterable<number | DOMPointInit>
Returns void
Inherited from CanvasPath.roundRect
- Defined in node_modules/typescript/lib/lib.dom.iterable.d.ts:50

save

save(): void
Returns void
Inherited from CanvasState.save
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3637

scale

scale(x: number, y: number): void
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasTransform.scale
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3658

setLineDash

setLineDash(segments: number[]): void
Parameters
- segments: number[]
Returns void
Inherited from CanvasPathDrawingStyles.setLineDash
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3597
setLineDash(segments: Iterable<number>): void
Parameters
- segments: Iterable<number>
Returns void
Inherited from CanvasPathDrawingStyles.setLineDash
- Defined in node_modules/typescript/lib/lib.dom.iterable.d.ts:54

setTransform

setTransform(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
Inherited from CanvasTransform.setTransform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3659
setTransform(transform?: DOMMatrix2DInit): void
Parameters
- Optional transform: DOMMatrix2DInit
Returns void
Inherited from CanvasTransform.setTransform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3660

stroke

stroke(): void
Returns void
Inherited from CanvasDrawPath.stroke
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3532
stroke(path: Path2D): void
Parameters
- path: Path2D
Returns void
Inherited from CanvasDrawPath.stroke
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3533

strokeRect

strokeRect(x: number, y: number, w: number, h: number): void
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasRect.strokeRect
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3614

strokeText

strokeText(text: string, x: number, y: number, maxWidth?: number): void
Parameters
- text: string
- x: number
- y: number
- Optional maxWidth: number
Returns void
Inherited from CanvasText.strokeText
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3643

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
Inherited from CanvasTransform.transform
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3661

translate

translate(x: number, y: number): void
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasTransform.translate
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3662

Interface CanvasRenderingContext2D

Hierarchy

Index

Properties

Methods

Properties

Readonly canvas

direction

fillStyle

filter

font

fontKerning

globalAlpha

globalCompositeOperation

imageSmoothingEnabled

imageSmoothingQuality

lineCap

lineDashOffset

lineJoin

lineWidth

miterLimit

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

strokeStyle

textAlign

textBaseline

Methods

arc

Parameters

x: number

y: number

radius: number

startAngle: number

endAngle: number

Optional counterclockwise: boolean

Returns void

arcTo

Parameters

x1: number

y1: number

x2: number

y2: number

radius: number

Returns void

beginPath

Returns void

bezierCurveTo

Parameters

cp1x: number

cp1y: number

cp2x: number

cp2y: number

x: number

y: number

Returns void

clearRect

Parameters

x: number

y: number

w: number

h: number

Returns void

clip

Parameters

Optional fillRule: CanvasFillRule

Returns void

Parameters

path: Path2D

Optional fillRule: CanvasFillRule

Returns void

closePath

Returns void

createConicGradient

Parameters

startAngle: number

x: number

y: number

Returns CanvasGradient

`Readonly` canvas

`Optional` counterclockwise: boolean

`Optional` fillRule: CanvasFillRule

`Optional` fillRule: CanvasFillRule

`Optional` settings: ImageDataSettings