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

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:3443

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:3444

beginPath

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

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:3445

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:3476

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:3389
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:3390

closePath

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

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:3404

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:3430
createImageData(imagedata: ImageData): ImageData
Parameters
- imagedata: ImageData
Returns ImageData
Inherited from CanvasImageData.createImageData
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3431

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:3405

createPattern

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

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:3407

drawFocusIfNeeded

drawFocusIfNeeded(element: Element): void
Parameters
- element: Element
Returns void
Inherited from CanvasUserInterface.drawFocusIfNeeded
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3529
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:3530

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:3382
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:3383
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:3384

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:3447

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:3391
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:3392

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:3477

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:3505

getContextAttributes

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

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:3432

getLineDash

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

getTransform

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

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:3393
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:3394

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:3395
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:3396

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:3448

measureText

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

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:3449

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:3433
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:3434

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:3450

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:3451

resetTransform

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

restore

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

rotate

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

save

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

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:3521

setLineDash

setLineDash(segments: number[]): void
Parameters
- segments: number[]
Returns void
Inherited from CanvasPathDrawingStyles.setLineDash
- Defined in node_modules/typescript/lib/lib.dom.d.ts:3461
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:50

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

stroke

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

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:3478

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:3507

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:3524

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:3525

Interface CanvasRenderingContext2D

Hierarchy

Index

Properties

Methods

Properties

Readonly canvas

direction

fillStyle

filter

font

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

createImageData

`Readonly` canvas

`Optional` counterclockwise: boolean

`Optional` fillRule: CanvasFillRule

`Optional` fillRule: CanvasFillRule

`Optional` settings: ImageDataSettings