OffscreenCanvas

When using the <canvas> element or the Canvas API, rendering, animation, and user interaction usually happen on the main execution thread of a web application. The computation relating to canvas animations and rendering can have a significant impact on application performance.

MDN Reference

Extends

• EventTarget

Methods

addEventListener()

Call Signature

addEventListener<K>(
   type, 
   listener, 
   options?
): void;

The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

MDN Reference

Type Parameters

Type Parameter
K extends keyof OffscreenCanvasEventMap

Parameters

Parameter	Type
type	K
listener	(this, ev) => any
options?	boolean | AddEventListenerOptions

Returns

void

Overrides

EventTarget.addEventListener

Call Signature

addEventListener(
   type, 
   listener, 
   options?
): void;

The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

MDN Reference

Parameters

Parameter	Type
type	string
listener	EventListenerOrEventListenerObject
options?	boolean | AddEventListenerOptions

Returns

void

Overrides

EventTarget.addEventListener

---

convertToBlob()

convertToBlob(options?): Promise<Blob>;

The OffscreenCanvas.convertToBlob() method creates a Blob object representing the image contained in the canvas.

MDN Reference

Parameters

Parameter	Type
options?	ImageEncodeOptions

Returns

Promise<Blob>

---

dispatchEvent()

dispatchEvent(event): boolean;

The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().

MDN Reference

Parameters

Parameter	Type
event	Event

Returns

boolean

Inherited from

EventTarget.dispatchEvent

---

getContext()

Call Signature

getContext(contextId, options?): 
  | OffscreenCanvasRenderingContext2D
  | null;

The OffscreenCanvas.getContext() method returns a drawing context for an offscreen canvas, or null if the context identifier is not supported, or the offscreen canvas has already been set to a different context mode.

MDN Reference

Parameters

Parameter	Type
contextId	"2d"
options?	any

Returns

| OffscreenCanvasRenderingContext2D | null

Call Signature

getContext(contextId, options?): ImageBitmapRenderingContext | null;

Parameters

Parameter	Type
contextId	"bitmaprenderer"
options?	any

Returns

ImageBitmapRenderingContext | null

Call Signature

getContext(contextId, options?): WebGLRenderingContext | null;

Parameters

Parameter	Type
contextId	"webgl"
options?	any

Returns

WebGLRenderingContext | null

Call Signature

getContext(contextId, options?): WebGL2RenderingContext | null;

Parameters

Parameter	Type
contextId	"webgl2"
options?	any

Returns

WebGL2RenderingContext | null

Call Signature

getContext(contextId, options?): OffscreenRenderingContext | null;

Parameters

Parameter	Type
contextId	OffscreenRenderingContextId
options?	any

Returns

OffscreenRenderingContext | null

---

removeEventListener()

Call Signature

removeEventListener<K>(
   type, 
   listener, 
   options?
): void;

The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.

MDN Reference

Type Parameters

Type Parameter
K extends keyof OffscreenCanvasEventMap

Parameters

Parameter	Type
type	K
listener	(this, ev) => any
options?	boolean | EventListenerOptions

Returns

void

Overrides

EventTarget.removeEventListener

Call Signature

removeEventListener(
   type, 
   listener, 
   options?
): void;

The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.

MDN Reference

Parameters

Parameter	Type
type	string
listener	EventListenerOrEventListenerObject
options?	boolean | EventListenerOptions

Returns

void

Overrides

EventTarget.removeEventListener

---

transferToImageBitmap()

transferToImageBitmap(): ImageBitmap;

The OffscreenCanvas.transferToImageBitmap() method creates an ImageBitmap object from the most recently rendered image of the OffscreenCanvas. The OffscreenCanvas allocates a new image for its subsequent rendering.

MDN Reference

Returns

ImageBitmap

Properties

height

height: number;

The height property returns and sets the height of an OffscreenCanvas object.

MDN Reference

---

oncontextlost

oncontextlost: ((this, ev) => any) | null;

MDN Reference

---

oncontextrestored

oncontextrestored: ((this, ev) => any) | null;

MDN Reference

---

width

width: number;

The width property returns and sets the width of an OffscreenCanvas object.

MDN Reference