CanvasRenderingContext2D

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.

MDN Reference

Extends

• CanvasCompositing.CanvasDrawImage.CanvasDrawPath.CanvasFillStrokeStyles.CanvasFilters.CanvasImageData.CanvasImageSmoothing.CanvasPath.CanvasPathDrawingStyles.CanvasRect.CanvasSettings.CanvasShadowStyles.CanvasState.CanvasText.CanvasTextDrawingStyles.CanvasTransform.CanvasUserInterface

Methods

arc()

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
radius	number
startAngle	number
endAngle	number
counterclockwise?	boolean

Returns

void

Inherited from

CanvasPath.arc

---

arcTo()

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

MDN Reference

Parameters

Parameter	Type
x1	number
y1	number
x2	number
y2	number
radius	number

Returns

void

Inherited from

CanvasPath.arcTo

---

beginPath()

beginPath(): void;

MDN Reference

Returns

void

Inherited from

CanvasDrawPath.beginPath

---

bezierCurveTo()

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

MDN Reference

Parameters

Parameter	Type
cp1x	number
cp1y	number
cp2x	number
cp2y	number
x	number
y	number

Returns

void

Inherited from

CanvasPath.bezierCurveTo

---

clearRect()

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasRect.clearRect

---

clip()

Call Signature

clip(fillRule?): void;

MDN Reference

Parameters

Parameter	Type
fillRule?	CanvasFillRule

Returns

void

Inherited from

CanvasDrawPath.clip

Call Signature

clip(path, fillRule?): void;

Parameters

Parameter	Type
path	Path2D
fillRule?	CanvasFillRule

Returns

void

Inherited from

CanvasDrawPath.clip

---

closePath()

closePath(): void;

MDN Reference

Returns

void

Inherited from

CanvasPath.closePath

---

createConicGradient()

createConicGradient(
   startAngle, 
   x, 
   y
): CanvasGradient;

MDN Reference

Parameters

Parameter	Type
startAngle	number
x	number
y	number

Returns

CanvasGradient

Inherited from

CanvasFillStrokeStyles.createConicGradient

---

createImageData()

Call Signature

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

MDN Reference

Parameters

Parameter	Type
sw	number
sh	number
settings?	ImageDataSettings

Returns

ImageData

Inherited from

CanvasImageData.createImageData

Call Signature

createImageData(imageData): ImageData;

Parameters

Parameter	Type
imageData	ImageData

Returns

ImageData

Inherited from

CanvasImageData.createImageData

---

createLinearGradient()

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

MDN Reference

Parameters

Parameter	Type
x0	number
y0	number
x1	number
y1	number

Returns

CanvasGradient

Inherited from

CanvasFillStrokeStyles.createLinearGradient

---

createPattern()

createPattern(image, repetition): CanvasPattern | null;

MDN Reference

Parameters

Parameter	Type
image	CanvasImageSource
repetition	string | null

Returns

CanvasPattern | null

Inherited from

CanvasFillStrokeStyles.createPattern

---

createRadialGradient()

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

MDN Reference

Parameters

Parameter	Type
x0	number
y0	number
r0	number
x1	number
y1	number
r1	number

Returns

CanvasGradient

Inherited from

CanvasFillStrokeStyles.createRadialGradient

---

drawFocusIfNeeded()

Call Signature

drawFocusIfNeeded(element): void;

MDN Reference

Parameters

Parameter	Type
element	Element

Returns

void

Inherited from

CanvasUserInterface.drawFocusIfNeeded

Call Signature

drawFocusIfNeeded(path, element): void;

Parameters

Parameter	Type
path	Path2D
element	Element

Returns

void

Inherited from

CanvasUserInterface.drawFocusIfNeeded

---

drawImage()

Call Signature

drawImage(
   image, 
   dx, 
   dy
): void;

MDN Reference

Parameters

Parameter	Type
image	CanvasImageSource
dx	number
dy	number

Returns

void

Inherited from

CanvasDrawImage.drawImage

Call Signature

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

Parameters

Parameter	Type
image	CanvasImageSource
dx	number
dy	number
dw	number
dh	number

Returns

void

Inherited from

CanvasDrawImage.drawImage

Call Signature

drawImage(
   image, 
   sx, 
   sy, 
   sw, 
   sh, 
   dx, 
   dy, 
   dw, 
   dh
): void;

Parameters

Parameter	Type
image	CanvasImageSource
sx	number
sy	number
sw	number
sh	number
dx	number
dy	number
dw	number
dh	number

Returns

void

Inherited from

CanvasDrawImage.drawImage

---

ellipse()

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
radiusX	number
radiusY	number
rotation	number
startAngle	number
endAngle	number
counterclockwise?	boolean

Returns

void

Inherited from

CanvasPath.ellipse

---

fill()

Call Signature

fill(fillRule?): void;

MDN Reference

Parameters

Parameter	Type
fillRule?	CanvasFillRule

Returns

void

Inherited from

CanvasDrawPath.fill

Call Signature

fill(path, fillRule?): void;

Parameters

Parameter	Type
path	Path2D
fillRule?	CanvasFillRule

Returns

void

Inherited from

CanvasDrawPath.fill

---

fillRect()

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasRect.fillRect

---

fillText()

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

MDN Reference

Parameters

Parameter	Type
text	string
x	number
y	number
maxWidth?	number

Returns

void

Inherited from

CanvasText.fillText

---

getContextAttributes()

getContextAttributes(): CanvasRenderingContext2DSettings;

MDN Reference

Returns

CanvasRenderingContext2DSettings

Inherited from

CanvasSettings.getContextAttributes

---

getImageData()

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

MDN Reference

Parameters

Parameter	Type
sx	number
sy	number
sw	number
sh	number
settings?	ImageDataSettings

Returns

ImageData

Inherited from

CanvasImageData.getImageData

---

getLineDash()

getLineDash(): number[];

MDN Reference

Returns

number[]

Inherited from

CanvasPathDrawingStyles.getLineDash

---

getTransform()

getTransform(): DOMMatrix;

MDN Reference

Returns

DOMMatrix

Inherited from

CanvasTransform.getTransform

---

isContextLost()

isContextLost(): boolean;

MDN Reference

Returns

boolean

Inherited from

CanvasState.isContextLost

---

isPointInPath()

Call Signature

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
fillRule?	CanvasFillRule

Returns

boolean

Inherited from

CanvasDrawPath.isPointInPath

Call Signature

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

Parameters

Parameter	Type
path	Path2D
x	number
y	number
fillRule?	CanvasFillRule

Returns

boolean

Inherited from

CanvasDrawPath.isPointInPath

---

isPointInStroke()

Call Signature

isPointInStroke(x, y): boolean;

MDN Reference

Parameters

Parameter	Type
x	number
y	number

Returns

boolean

Inherited from

CanvasDrawPath.isPointInStroke

Call Signature

isPointInStroke(
   path, 
   x, 
   y
): boolean;

Parameters

Parameter	Type
path	Path2D
x	number
y	number

Returns

boolean

Inherited from

CanvasDrawPath.isPointInStroke

---

lineTo()

lineTo(x, y): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number

Returns

void

Inherited from

CanvasPath.lineTo

---

measureText()

measureText(text): TextMetrics;

MDN Reference

Parameters

Parameter	Type
text	string

Returns

TextMetrics

Inherited from

CanvasText.measureText

---

moveTo()

moveTo(x, y): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number

Returns

void

Inherited from

CanvasPath.moveTo

---

putImageData()

Call Signature

putImageData(
   imageData, 
   dx, 
   dy
): void;

MDN Reference

Parameters

Parameter	Type
imageData	ImageData
dx	number
dy	number

Returns

void

Inherited from

CanvasImageData.putImageData

Call Signature

putImageData(
   imageData, 
   dx, 
   dy, 
   dirtyX, 
   dirtyY, 
   dirtyWidth, 
   dirtyHeight
): void;

Parameters

Parameter	Type
imageData	ImageData
dx	number
dy	number
dirtyX	number
dirtyY	number
dirtyWidth	number
dirtyHeight	number

Returns

void

Inherited from

CanvasImageData.putImageData

---

quadraticCurveTo()

quadraticCurveTo(
   cpx, 
   cpy, 
   x, 
   y
): void;

MDN Reference

Parameters

Parameter	Type
cpx	number
cpy	number
x	number
y	number

Returns

void

Inherited from

CanvasPath.quadraticCurveTo

---

rect()

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasPath.rect

---

reset()

reset(): void;

MDN Reference

Returns

void

Inherited from

CanvasState.reset

---

resetTransform()

resetTransform(): void;

MDN Reference

Returns

void

Inherited from

CanvasTransform.resetTransform

---

restore()

restore(): void;

MDN Reference

Returns

void

Inherited from

CanvasState.restore

---

rotate()

rotate(angle): void;

MDN Reference

Parameters

Parameter	Type
angle	number

Returns

void

Inherited from

CanvasTransform.rotate

---

roundRect()

Call Signature

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number
radii?	| number | DOMPointInit | (number | DOMPointInit)[]

Returns

void

Inherited from

CanvasPath.roundRect

Call Signature

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number
radii?	| number | DOMPointInit | Iterable<number | DOMPointInit, any, any>

Returns

void

Inherited from

CanvasPath.roundRect

---

save()

save(): void;

MDN Reference

Returns

void

Inherited from

CanvasState.save

---

scale()

scale(x, y): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number

Returns

void

Inherited from

CanvasTransform.scale

---

setLineDash()

Call Signature

setLineDash(segments): void;

MDN Reference

Parameters

Parameter	Type
segments	number[]

Returns

void

Inherited from

CanvasPathDrawingStyles.setLineDash

Call Signature

setLineDash(segments): void;

MDN Reference

Parameters

Parameter	Type
segments	Iterable<number>

Returns

void

Inherited from

CanvasPathDrawingStyles.setLineDash

---

setTransform()

Call Signature

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

MDN Reference

Parameters

Parameter	Type
a	number
b	number
c	number
d	number
e	number
f	number

Returns

void

Inherited from

CanvasTransform.setTransform

Call Signature

setTransform(transform?): void;

Parameters

Parameter	Type
transform?	DOMMatrix2DInit

Returns

void

Inherited from

CanvasTransform.setTransform

---

stroke()

Call Signature

stroke(): void;

MDN Reference

Returns

void

Inherited from

CanvasDrawPath.stroke

Call Signature

stroke(path): void;

Parameters

Parameter	Type
path	Path2D

Returns

void

Inherited from

CanvasDrawPath.stroke

---

strokeRect()

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

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasRect.strokeRect

---

strokeText()

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

MDN Reference

Parameters

Parameter	Type
text	string
x	number
y	number
maxWidth?	number

Returns

void

Inherited from

CanvasText.strokeText

---

transform()

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

MDN Reference

Parameters

Parameter	Type
a	number
b	number
c	number
d	number
e	number
f	number

Returns

void

Inherited from

CanvasTransform.transform

---

translate()

translate(x, y): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number

Returns

void

Inherited from

CanvasTransform.translate

Properties

canvas

readonly canvas: HTMLCanvasElement;

The CanvasRenderingContext2D.canvas property, part of the Canvas API, is a read-only reference to the HTMLCanvasElement object that is associated with a given context. It might be null if there is no associated <canvas> element.

MDN Reference

---

direction

direction: CanvasDirection;

MDN Reference

Inherited from

CanvasTextDrawingStyles.direction

---

fillStyle

fillStyle: 
  | string
  | CanvasGradient
  | CanvasPattern;

MDN Reference

Inherited from

CanvasFillStrokeStyles.fillStyle

---

filter

filter: string;

MDN Reference

Inherited from

CanvasFilters.filter

---

font

font: string;

MDN Reference

Inherited from

CanvasTextDrawingStyles.font

---

fontKerning

fontKerning: CanvasFontKerning;

MDN Reference

Inherited from

CanvasTextDrawingStyles.fontKerning

---

fontStretch

fontStretch: CanvasFontStretch;

MDN Reference

Inherited from

CanvasTextDrawingStyles.fontStretch

---

fontVariantCaps

fontVariantCaps: CanvasFontVariantCaps;

MDN Reference

Inherited from

CanvasTextDrawingStyles.fontVariantCaps

---

globalAlpha

globalAlpha: number;

MDN Reference

Inherited from

CanvasCompositing.globalAlpha

---

globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation;

MDN Reference

Inherited from

CanvasCompositing.globalCompositeOperation

---

imageSmoothingEnabled

imageSmoothingEnabled: boolean;

MDN Reference

Inherited from

CanvasImageSmoothing.imageSmoothingEnabled

---

imageSmoothingQuality

imageSmoothingQuality: ImageSmoothingQuality;

MDN Reference

Inherited from

CanvasImageSmoothing.imageSmoothingQuality

---

letterSpacing

letterSpacing: string;

MDN Reference

Inherited from

CanvasTextDrawingStyles.letterSpacing

---

lineCap

lineCap: CanvasLineCap;

MDN Reference

Inherited from

CanvasPathDrawingStyles.lineCap

---

lineDashOffset

lineDashOffset: number;

MDN Reference

Inherited from

CanvasPathDrawingStyles.lineDashOffset

---

lineJoin

lineJoin: CanvasLineJoin;

MDN Reference

Inherited from

CanvasPathDrawingStyles.lineJoin

---

lineWidth

lineWidth: number;

MDN Reference

Inherited from

CanvasPathDrawingStyles.lineWidth

---

miterLimit

miterLimit: number;

MDN Reference

Inherited from

CanvasPathDrawingStyles.miterLimit

---

shadowBlur

shadowBlur: number;

MDN Reference

Inherited from

CanvasShadowStyles.shadowBlur

---

shadowColor

shadowColor: string;

MDN Reference

Inherited from

CanvasShadowStyles.shadowColor

---

shadowOffsetX

shadowOffsetX: number;

MDN Reference

Inherited from

CanvasShadowStyles.shadowOffsetX

---

shadowOffsetY

shadowOffsetY: number;

MDN Reference

Inherited from

CanvasShadowStyles.shadowOffsetY

---

strokeStyle

strokeStyle: 
  | string
  | CanvasGradient
  | CanvasPattern;

MDN Reference

Inherited from

CanvasFillStrokeStyles.strokeStyle

---

textAlign

textAlign: CanvasTextAlign;

MDN Reference

Inherited from

CanvasTextDrawingStyles.textAlign

---

textBaseline

textBaseline: CanvasTextBaseline;

MDN Reference

Inherited from

CanvasTextDrawingStyles.textBaseline

---

textRendering

textRendering: CanvasTextRendering;

MDN Reference

Inherited from

CanvasTextDrawingStyles.textRendering

---

wordSpacing

wordSpacing: string;

MDN Reference

Inherited from

CanvasTextDrawingStyles.wordSpacing