@ralphschuler.webgl shader factory.<internal>.CanvasRenderingContext2D

Interface: CanvasRenderingContext2D

@ralphschuler/webgl-shader-factory.<internal>.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.

MDN Reference

Hierarchy

• CanvasCompositing

• CanvasDrawImage

• CanvasDrawPath

• CanvasFillStrokeStyles

• CanvasFilters

• CanvasImageData

• CanvasImageSmoothing

• CanvasPath

• CanvasPathDrawingStyles

• CanvasRect

• CanvasShadowStyles

• CanvasState

• CanvasText

• CanvasTextDrawingStyles

• CanvasTransform

• CanvasUserInterface

  ↳ CanvasRenderingContext2D

Table of contents

Properties

• canvas
• direction
• fillStyle
• filter
• font
• fontKerning
• globalAlpha
• globalCompositeOperation
• imageSmoothingEnabled
• imageSmoothingQuality
• lineCap
• lineDashOffset
• lineJoin
• lineWidth
• miterLimit
• shadowBlur
• shadowColor
• shadowOffsetX
• shadowOffsetY
• strokeStyle
• textAlign
• textBaseline

Methods

• arc
• arcTo
• beginPath
• bezierCurveTo
• clearRect
• clip
• closePath
• createConicGradient
• createImageData
• createLinearGradient
• createPattern
• createRadialGradient
• drawFocusIfNeeded
• drawImage
• ellipse
• fill
• fillRect
• fillText
• getContextAttributes
• getImageData
• getLineDash
• getTransform
• isPointInPath
• isPointInStroke
• lineTo
• measureText
• moveTo
• putImageData
• quadraticCurveTo
• rect
• reset
• resetTransform
• restore
• rotate
• roundRect
• save
• scale
• setLineDash
• setTransform
• stroke
• strokeRect
• strokeText
• transform
• translate

Properties

canvas

• Readonly canvas: HTMLCanvasElement

MDN Reference

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5461

---

direction

• direction: CanvasDirection

MDN Reference

Inherited from

CanvasTextDrawingStyles.direction

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5502

---

fillStyle

• fillStyle: string | CanvasGradient | CanvasPattern

MDN Reference

Inherited from

CanvasFillStrokeStyles.fillStyle

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5329

---

filter

• filter: string

MDN Reference

Inherited from

CanvasFilters.filter

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5344

---

font

• font: string

MDN Reference

Inherited from

CanvasTextDrawingStyles.font

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5504

---

fontKerning

• fontKerning: CanvasFontKerning

MDN Reference

Inherited from

CanvasTextDrawingStyles.fontKerning

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5506

---

globalAlpha

• globalAlpha: number

MDN Reference

Inherited from

CanvasCompositing.globalAlpha

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5295

---

globalCompositeOperation

• globalCompositeOperation: GlobalCompositeOperation

MDN Reference

Inherited from

CanvasCompositing.globalCompositeOperation

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5297

---

imageSmoothingEnabled

• imageSmoothingEnabled: boolean

MDN Reference

Inherited from

CanvasImageSmoothing.imageSmoothingEnabled

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5381

---

imageSmoothingQuality

• imageSmoothingQuality: ImageSmoothingQuality

MDN Reference

Inherited from

CanvasImageSmoothing.imageSmoothingQuality

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5383

---

lineCap

• lineCap: CanvasLineCap

MDN Reference

Inherited from

CanvasPathDrawingStyles.lineCap

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5411

---

lineDashOffset

• lineDashOffset: number

MDN Reference

Inherited from

CanvasPathDrawingStyles.lineDashOffset

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5413

---

lineJoin

• lineJoin: CanvasLineJoin

MDN Reference

Inherited from

CanvasPathDrawingStyles.lineJoin

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5415

---

lineWidth

• lineWidth: number

MDN Reference

Inherited from

CanvasPathDrawingStyles.lineWidth

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5417

---

miterLimit

• miterLimit: number

MDN Reference

Inherited from

CanvasPathDrawingStyles.miterLimit

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5419

---

shadowBlur

• shadowBlur: number

MDN Reference

Inherited from

CanvasShadowStyles.shadowBlur

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5473

---

shadowColor

• shadowColor: string

MDN Reference

Inherited from

CanvasShadowStyles.shadowColor

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5475

---

shadowOffsetX

• shadowOffsetX: number

MDN Reference

Inherited from

CanvasShadowStyles.shadowOffsetX

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5477

---

shadowOffsetY

• shadowOffsetY: number

MDN Reference

Inherited from

CanvasShadowStyles.shadowOffsetY

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5479

---

strokeStyle

• strokeStyle: string | CanvasGradient | CanvasPattern

MDN Reference

Inherited from

CanvasFillStrokeStyles.strokeStyle

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5331

---

textAlign

• textAlign: CanvasTextAlign

MDN Reference

Inherited from

CanvasTextDrawingStyles.textAlign

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5508

---

textBaseline

• textBaseline: CanvasTextBaseline

MDN Reference

Inherited from

CanvasTextDrawingStyles.textBaseline

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5510

Methods

arc

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

MDN Reference

Parameters

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

Returns

void

Inherited from

CanvasPath.arc

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5388

---

arcTo

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

MDN Reference

Parameters

Name	Type
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:5390

---

beginPath

▸ beginPath(): void

MDN Reference

Returns

void

Inherited from

CanvasDrawPath.beginPath

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5309

---

bezierCurveTo

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

MDN Reference

Parameters

Name	Type
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:5392

---

clearRect

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

MDN Reference

Parameters

Name	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasRect.clearRect

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5447

---

clip

▸ clip(fillRule?): void

MDN Reference

Parameters

Name	Type
fillRule?	CanvasFillRule

Returns

void

Inherited from

CanvasDrawPath.clip

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5311

▸ clip(path, fillRule?): void

Parameters

Name	Type
path	Path2D
fillRule?	CanvasFillRule

Returns

void

Inherited from

CanvasDrawPath.clip

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5312

---

closePath

▸ closePath(): void

MDN Reference

Returns

void

Inherited from

CanvasPath.closePath

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5394

---

createConicGradient

▸ createConicGradient(startAngle, x, y): CanvasGradient

MDN Reference

Parameters

Name	Type
startAngle	number
x	number
y	number

Returns

CanvasGradient

Inherited from

CanvasFillStrokeStyles.createConicGradient

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5333

---

createImageData

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

MDN Reference

Parameters

Name	Type
sw	number
sh	number
settings?	ImageDataSettings

Returns

ImageData

Inherited from

CanvasImageData.createImageData

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5370

▸ createImageData(imagedata): ImageData

Parameters

Name	Type
imagedata	ImageData

Returns

ImageData

Inherited from

CanvasImageData.createImageData

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5371

---

createLinearGradient

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

MDN Reference

Parameters

Name	Type
x0	number
y0	number
x1	number
y1	number

Returns

CanvasGradient

Inherited from

CanvasFillStrokeStyles.createLinearGradient

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5335

---

createPattern

▸ createPattern(image, repetition): null | CanvasPattern

MDN Reference

Parameters

Name	Type
image	CanvasImageSource
repetition	null | string

Returns

null | CanvasPattern

Inherited from

CanvasFillStrokeStyles.createPattern

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5337

---

createRadialGradient

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

MDN Reference

Parameters

Name	Type
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:5339

---

drawFocusIfNeeded

▸ drawFocusIfNeeded(element): void

MDN Reference

Parameters

Name	Type
element	Element

Returns

void

Inherited from

CanvasUserInterface.drawFocusIfNeeded

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5533

▸ drawFocusIfNeeded(path, element): void

Parameters

Name	Type
path	Path2D
element	Element

Returns

void

Inherited from

CanvasUserInterface.drawFocusIfNeeded

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5534

---

drawImage

▸ drawImage(image, dx, dy): void

MDN Reference

Parameters

Name	Type
image	CanvasImageSource
dx	number
dy	number

Returns

void

Inherited from

CanvasDrawImage.drawImage

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5302

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

Parameters

Name	Type
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:5303

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

Parameters

Name	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

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5304

---

ellipse

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

MDN Reference

Parameters

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

Returns

void

Inherited from

CanvasPath.ellipse

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5396

---

fill

▸ fill(fillRule?): void

MDN Reference

Parameters

Name	Type
fillRule?	CanvasFillRule

Returns

void

Inherited from

CanvasDrawPath.fill

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5314

▸ fill(path, fillRule?): void

Parameters

Name	Type
path	Path2D
fillRule?	CanvasFillRule

Returns

void

Inherited from

CanvasDrawPath.fill

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5315

---

fillRect

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

MDN Reference

Parameters

Name	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasRect.fillRect

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5449

---

fillText

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

MDN Reference

Parameters

Name	Type
text	string
x	number
y	number
maxWidth?	number

Returns

void

Inherited from

CanvasText.fillText

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5493

---

getContextAttributes

▸ getContextAttributes(): CanvasRenderingContext2DSettings

MDN Reference

Returns

CanvasRenderingContext2DSettings

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5463

---

getImageData

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

MDN Reference

Parameters

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

Returns

ImageData

Inherited from

CanvasImageData.getImageData

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5373

---

getLineDash

▸ getLineDash(): number[]

MDN Reference

Returns

number[]

Inherited from

CanvasPathDrawingStyles.getLineDash

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5421

---

getTransform

▸ getTransform(): DOMMatrix

MDN Reference

Returns

DOMMatrix

Inherited from

CanvasTransform.getTransform

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5515

---

isPointInPath

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

MDN Reference

Parameters

Name	Type
x	number
y	number
fillRule?	CanvasFillRule

Returns

boolean

Inherited from

CanvasDrawPath.isPointInPath

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5317

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

Parameters

Name	Type
path	Path2D
x	number
y	number
fillRule?	CanvasFillRule

Returns

boolean

Inherited from

CanvasDrawPath.isPointInPath

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5318

---

isPointInStroke

▸ isPointInStroke(x, y): boolean

MDN Reference

Parameters

Name	Type
x	number
y	number

Returns

boolean

Inherited from

CanvasDrawPath.isPointInStroke

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5320

▸ isPointInStroke(path, x, y): boolean

Parameters

Name	Type
path	Path2D
x	number
y	number

Returns

boolean

Inherited from

CanvasDrawPath.isPointInStroke

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5321

---

lineTo

▸ lineTo(x, y): void

MDN Reference

Parameters

Name	Type
x	number
y	number

Returns

void

Inherited from

CanvasPath.lineTo

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5398

---

measureText

▸ measureText(text): TextMetrics

MDN Reference

Parameters

Name	Type
text	string

Returns

TextMetrics

Inherited from

CanvasText.measureText

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5495

---

moveTo

▸ moveTo(x, y): void

MDN Reference

Parameters

Name	Type
x	number
y	number

Returns

void

Inherited from

CanvasPath.moveTo

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5400

---

putImageData

▸ putImageData(imagedata, dx, dy): void

MDN Reference

Parameters

Name	Type
imagedata	ImageData
dx	number
dy	number

Returns

void

Inherited from

CanvasImageData.putImageData

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5375

▸ putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight): void

Parameters

Name	Type
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:5376

---

quadraticCurveTo

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

MDN Reference

Parameters

Name	Type
cpx	number
cpy	number
x	number
y	number

Returns

void

Inherited from

CanvasPath.quadraticCurveTo

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5402

---

rect

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

MDN Reference

Parameters

Name	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasPath.rect

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5404

---

reset

▸ reset(): void

MDN Reference

Returns

void

Inherited from

CanvasState.reset

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5484

---

resetTransform

▸ resetTransform(): void

MDN Reference

Returns

void

Inherited from

CanvasTransform.resetTransform

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5517

---

restore

▸ restore(): void

MDN Reference

Returns

void

Inherited from

CanvasState.restore

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5486

---

rotate

▸ rotate(angle): void

MDN Reference

Parameters

Name	Type
angle	number

Returns

void

Inherited from

CanvasTransform.rotate

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5519

---

roundRect

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

MDN Reference

Parameters

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

Returns

void

Inherited from

CanvasPath.roundRect

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5406

---

save

▸ save(): void

MDN Reference

Returns

void

Inherited from

CanvasState.save

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5488

---

scale

▸ scale(x, y): void

MDN Reference

Parameters

Name	Type
x	number
y	number

Returns

void

Inherited from

CanvasTransform.scale

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5521

---

setLineDash

▸ setLineDash(segments): void

MDN Reference

Parameters

Name	Type
segments	number[]

Returns

void

Inherited from

CanvasPathDrawingStyles.setLineDash

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5423

---

setTransform

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

MDN Reference

Parameters

Name	Type
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:5523

▸ setTransform(transform?): void

Parameters

Name	Type
transform?	DOMMatrix2DInit

Returns

void

Inherited from

CanvasTransform.setTransform

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5524

---

stroke

▸ stroke(): void

MDN Reference

Returns

void

Inherited from

CanvasDrawPath.stroke

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5323

▸ stroke(path): void

Parameters

Name	Type
path	Path2D

Returns

void

Inherited from

CanvasDrawPath.stroke

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5324

---

strokeRect

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

MDN Reference

Parameters

Name	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasRect.strokeRect

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5451

---

strokeText

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

MDN Reference

Parameters

Name	Type
text	string
x	number
y	number
maxWidth?	number

Returns

void

Inherited from

CanvasText.strokeText

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5497

---

transform

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

MDN Reference

Parameters

Name	Type
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:5526

---

translate

▸ translate(x, y): void

MDN Reference

Parameters

Name	Type
x	number
y	number

Returns

void

Inherited from

CanvasTransform.translate

Defined in

node_modules/typescript/lib/lib.dom.d.ts:5528