Interface OffscreenCanvasRenderingContext2D
interface OffscreenCanvasRenderingContext2D {
canvas: OffscreenCanvas;
direction: CanvasDirection;
fillStyle: string | CanvasGradient | CanvasPattern;
filter: string;
font: string;
fontKerning: CanvasFontKerning;
fontStretch: CanvasFontStretch;
fontVariantCaps: CanvasFontVariantCaps;
globalAlpha: number;
globalCompositeOperation: GlobalCompositeOperation;
imageSmoothingEnabled: boolean;
imageSmoothingQuality: ImageSmoothingQuality;
letterSpacing: string;
lineCap: CanvasLineCap;
lineDashOffset: number;
lineJoin: CanvasLineJoin;
lineWidth: number;
miterLimit: number;
shadowBlur: number;
shadowColor: string;
shadowOffsetX: number;
shadowOffsetY: number;
strokeStyle: string | CanvasGradient | CanvasPattern;
textAlign: CanvasTextAlign;
textBaseline: CanvasTextBaseline;
textRendering: CanvasTextRendering;
wordSpacing: string;
arc(
x: number,
y: number,
radius: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void;
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
beginPath(): void;
bezierCurveTo(
cp1x: number,
cp1y: number,
cp2x: number,
cp2y: number,
x: number,
y: number,
): void;
clearRect(x: number, y: number, w: number, h: number): void;
clip(fillRule?: CanvasFillRule): void;
clip(path: Path2D, fillRule?: CanvasFillRule): void;
closePath(): void;
createConicGradient(
startAngle: number,
x: number,
y: number,
): CanvasGradient;
createImageData(
sw: number,
sh: number,
settings?: ImageDataSettings,
): ImageData;
createImageData(imageData: ImageData): ImageData;
createLinearGradient(
x0: number,
y0: number,
x1: number,
y1: number,
): CanvasGradient;
createPattern(
image: CanvasImageSource,
repetition: string | null,
): CanvasPattern | null;
createRadialGradient(
x0: number,
y0: number,
r0: number,
x1: number,
y1: number,
r1: number,
): CanvasGradient;
drawImage(image: CanvasImageSource, dx: number, dy: number): void;
drawImage(
image: CanvasImageSource,
dx: number,
dy: number,
dw: number,
dh: number,
): void;
drawImage(
image: CanvasImageSource,
sx: number,
sy: number,
sw: number,
sh: number,
dx: number,
dy: number,
dw: number,
dh: number,
): void;
ellipse(
x: number,
y: number,
radiusX: number,
radiusY: number,
rotation: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void;
fill(fillRule?: CanvasFillRule): void;
fill(path: Path2D, fillRule?: CanvasFillRule): void;
fillRect(x: number, y: number, w: number, h: number): void;
fillText(text: string, x: number, y: number, maxWidth?: number): void;
getImageData(
sx: number,
sy: number,
sw: number,
sh: number,
settings?: ImageDataSettings,
): ImageData;
getLineDash(): number[];
getTransform(): DOMMatrix;
isContextLost(): boolean;
isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
isPointInPath(
path: Path2D,
x: number,
y: number,
fillRule?: CanvasFillRule,
): boolean;
isPointInStroke(x: number, y: number): boolean;
isPointInStroke(path: Path2D, x: number, y: number): boolean;
lineTo(x: number, y: number): void;
measureText(text: string): TextMetrics;
moveTo(x: number, y: number): void;
putImageData(imageData: ImageData, dx: number, dy: number): void;
putImageData(
imageData: ImageData,
dx: number,
dy: number,
dirtyX: number,
dirtyY: number,
dirtyWidth: number,
dirtyHeight: number,
): void;
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
rect(x: number, y: number, w: number, h: number): void;
reset(): void;
resetTransform(): void;
restore(): void;
rotate(angle: number): void;
roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void;
roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>,
): void;
save(): void;
scale(x: number, y: number): void;
setLineDash(segments: number[]): void;
setLineDash(segments: Iterable<number>): void;
setTransform(
a: number,
b: number,
c: number,
d: number,
e: number,
f: number,
): void;
setTransform(transform?: DOMMatrix2DInit): void;
stroke(): void;
stroke(path: Path2D): void;
strokeRect(x: number, y: number, w: number, h: number): void;
strokeText(text: string, x: number, y: number, maxWidth?: number): void;
transform(
a: number,
b: number,
c: number,
d: number,
e: number,
f: number,
): void;
translate(x: number, y: number): void;
}
canvas: OffscreenCanvas;
direction: CanvasDirection;
fillStyle: string | CanvasGradient | CanvasPattern;
filter: string;
font: string;
fontKerning: CanvasFontKerning;
fontStretch: CanvasFontStretch;
fontVariantCaps: CanvasFontVariantCaps;
globalAlpha: number;
globalCompositeOperation: GlobalCompositeOperation;
imageSmoothingEnabled: boolean;
imageSmoothingQuality: ImageSmoothingQuality;
letterSpacing: string;
lineCap: CanvasLineCap;
lineDashOffset: number;
lineJoin: CanvasLineJoin;
lineWidth: number;
miterLimit: number;
shadowBlur: number;
shadowColor: string;
shadowOffsetX: number;
shadowOffsetY: number;
strokeStyle: string | CanvasGradient | CanvasPattern;
textAlign: CanvasTextAlign;
textBaseline: CanvasTextBaseline;
textRendering: CanvasTextRendering;
wordSpacing: string;
arc(
x: number,
y: number,
radius: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void;
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
beginPath(): void;
bezierCurveTo(
cp1x: number,
cp1y: number,
cp2x: number,
cp2y: number,
x: number,
y: number,
): void;
clearRect(x: number, y: number, w: number, h: number): void;
clip(fillRule?: CanvasFillRule): void;
clip(path: Path2D, fillRule?: CanvasFillRule): void;
closePath(): void;
createConicGradient(
startAngle: number,
x: number,
y: number,
): CanvasGradient;
createImageData(
sw: number,
sh: number,
settings?: ImageDataSettings,
): ImageData;
createImageData(imageData: ImageData): ImageData;
createLinearGradient(
x0: number,
y0: number,
x1: number,
y1: number,
): CanvasGradient;
createPattern(
image: CanvasImageSource,
repetition: string | null,
): CanvasPattern | null;
createRadialGradient(
x0: number,
y0: number,
r0: number,
x1: number,
y1: number,
r1: number,
): CanvasGradient;
drawImage(image: CanvasImageSource, dx: number, dy: number): void;
drawImage(
image: CanvasImageSource,
dx: number,
dy: number,
dw: number,
dh: number,
): void;
drawImage(
image: CanvasImageSource,
sx: number,
sy: number,
sw: number,
sh: number,
dx: number,
dy: number,
dw: number,
dh: number,
): void;
ellipse(
x: number,
y: number,
radiusX: number,
radiusY: number,
rotation: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void;
fill(fillRule?: CanvasFillRule): void;
fill(path: Path2D, fillRule?: CanvasFillRule): void;
fillRect(x: number, y: number, w: number, h: number): void;
fillText(text: string, x: number, y: number, maxWidth?: number): void;
getImageData(
sx: number,
sy: number,
sw: number,
sh: number,
settings?: ImageDataSettings,
): ImageData;
getLineDash(): number[];
getTransform(): DOMMatrix;
isContextLost(): boolean;
isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
isPointInPath(
path: Path2D,
x: number,
y: number,
fillRule?: CanvasFillRule,
): boolean;
isPointInStroke(x: number, y: number): boolean;
isPointInStroke(path: Path2D, x: number, y: number): boolean;
lineTo(x: number, y: number): void;
measureText(text: string): TextMetrics;
moveTo(x: number, y: number): void;
putImageData(imageData: ImageData, dx: number, dy: number): void;
putImageData(
imageData: ImageData,
dx: number,
dy: number,
dirtyX: number,
dirtyY: number,
dirtyWidth: number,
dirtyHeight: number,
): void;
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
rect(x: number, y: number, w: number, h: number): void;
reset(): void;
resetTransform(): void;
restore(): void;
rotate(angle: number): void;
roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void;
roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>,
): void;
save(): void;
scale(x: number, y: number): void;
setLineDash(segments: number[]): void;
setLineDash(segments: Iterable<number>): void;
setTransform(
a: number,
b: number,
c: number,
d: number,
e: number,
f: number,
): void;
setTransform(transform?: DOMMatrix2DInit): void;
stroke(): void;
stroke(path: Path2D): void;
strokeRect(x: number, y: number, w: number, h: number): void;
strokeText(text: string, x: number, y: number, maxWidth?: number): void;
transform(
a: number,
b: number,
c: number,
d: number,
e: number,
f: number,
): void;
translate(x: number, y: number): void;
}
Hierarchy
- CanvasCompositing
- CanvasDrawImage
- CanvasDrawPath
- CanvasFillStrokeStyles
- CanvasFilters
- CanvasImageData
- CanvasImageSmoothing
- CanvasPath
- CanvasPathDrawingStyles
- CanvasRect
- CanvasShadowStyles
- CanvasState
- CanvasText
- CanvasTextDrawingStyles
- CanvasTransform
- OffscreenCanvasRenderingContext2D (View Summary)
Index
Properties
canvas
direction
fillStyle
filter
font
fontKerning
fontStretch
fontVariantCaps
globalAlpha
globalCompositeOperation
imageSmoothingEnabled
imageSmoothingQuality
letterSpacing
lineCap
lineDashOffset
lineJoin
lineWidth
miterLimit
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
strokeStyle
textAlign
textBaseline
textRendering
wordSpacing
Methods
arc
arcTo
beginPath
bezierCurveTo
clearRect
clip
closePath
createConicGradient
createImageData
createLinearGradient
createPattern
createRadialGradient
drawImage
ellipse
fill
fillRect
fillText
getImageData
getLineDash
getTransform
isContextLost
isPointInPath
isPointInStroke
lineTo
measureText
moveTo
putImageData
quadraticCurveTo
rect
reset
resetTransform
restore
rotate
roundRect
save
scale
setLineDash
setTransform
stroke
strokeRect
strokeText
transform
translate
Properties
Readonlycanvas
direction
fillStyle
filter
filter: string
font
font: string
fontKerning
fontStretch
fontVariantCaps
globalAlpha
globalAlpha: number
globalCompositeOperation
imageSmoothingEnabled
imageSmoothingEnabled: boolean
imageSmoothingQuality
letterSpacing
letterSpacing: string
lineCap
lineDashOffset
lineDashOffset: number
lineJoin
lineWidth
lineWidth: number
miterLimit
miterLimit: number
shadowBlur
shadowBlur: number
shadowColor
shadowColor: string
shadowOffsetX
shadowOffsetX: number
shadowOffsetY
shadowOffsetY: number
strokeStyle
textAlign
textBaseline
textRendering
wordSpacing
wordSpacing: string
Methods
arc
arcTo
beginPath
Returns void
bezierCurveTo
Parameters
- cp1x: number
- cp1y: number
- cp2x: number
- cp2y: number
- x: number
- y: number
Returns void
clearRect
clip
Parameters
- path: Path2D
OptionalfillRule: CanvasFillRule
Returns void
closePath
Returns void
createConicGradient
createImageData
createLinearGradient
createPattern
Parameters
- image: CanvasImageSource
- repetition: string | null
Returns CanvasPattern | null
createRadialGradient
- createRadialGradient(
x0: number,
y0: number,
r0: number,
x1: number,
y1: number,
r1: number,
): CanvasGradientParameters
- x0: number
- y0: number
- r0: number
- x1: number
- y1: number
- r1: number
Returns CanvasGradient
drawImage
Parameters
- image: CanvasImageSource
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
- drawImage(
image: CanvasImageSource,
sx: number,
sy: number,
sw: number,
sh: number,
dx: number,
dy: number,
dw: number,
dh: number,
): voidParameters
- image: CanvasImageSource
- sx: number
- sy: number
- sw: number
- sh: number
- dx: number
- dy: number
- dw: number
- dh: number
Returns void
ellipse
- ellipse(
x: number,
y: number,
radiusX: number,
radiusY: number,
rotation: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): voidParameters
- x: number
- y: number
- radiusX: number
- radiusY: number
- rotation: number
- startAngle: number
- endAngle: number
Optionalcounterclockwise: boolean
Returns void
fill
Parameters
- path: Path2D
OptionalfillRule: CanvasFillRule
Returns void
fillRect
fillText
getImageData
- getImageData(
sx: number,
sy: number,
sw: number,
sh: number,
settings?: ImageDataSettings,
): ImageDataParameters
- sx: number
- sy: number
- sw: number
- sh: number
Optionalsettings: ImageDataSettings
Returns ImageData
getLineDash
Returns number[]
getTransform
Returns DOMMatrix
isContextLost
Returns boolean
isPointInPath
Parameters
- path: Path2D
- x: number
- y: number
OptionalfillRule: CanvasFillRule
Returns boolean
isPointInStroke
Parameters
- path: Path2D
- x: number
- y: number
Returns boolean
lineTo
measureText
moveTo
putImageData
quadraticCurveTo
rect
reset
Returns void
resetTransform
Returns void
restore
Returns void
rotate
roundRect
- roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | (number | DOMPointInit)[],
): voidParameters
- x: number
- y: number
- w: number
- h: number
Optionalradii: number | DOMPointInit | (number | DOMPointInit)[]
Returns void
- roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>,
): voidParameters
- x: number
- y: number
- w: number
- h: number
Optionalradii: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>
Returns void
save
Returns void
scale
setLineDash
setTransform
Parameters
Optionaltransform: DOMMatrix2DInit
Returns void
stroke
Returns void
Parameters
- path: Path2D
Returns void
The
OffscreenCanvasRenderingContext2Dinterface is a CanvasRenderingContext2D rendering context for drawing to the bitmap of anOffscreenCanvasobject.MDN Reference