---
title: "OffscreenCanvas | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface OffscreenCanvas

When using the

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](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas)

interface OffscreenCanvas {  
    [height](#height): number;  
    [oncontextlost](#oncontextlost): ((this: OffscreenCanvas, ev: Event) \=> any) | null;  
    [oncontextrestored](#oncontextrestored): ((this: OffscreenCanvas, ev: Event) \=> any) | null;  
    [width](#width): number;  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends keyof [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: OffscreenCanvas, ev: [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [addEventListener](#addeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [convertToBlob](#converttoblob-1)(options?: [ImageEncodeOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageEncodeOptions/)): Promise<Blob\>;  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [getContext](#getcontext-1)(  
        contextId: "2d",  
        options?: any,  
    ): [OffscreenCanvasRenderingContext2D](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasRenderingContext2D/) | null;  
    [getContext](#getcontext-2)(  
        contextId: "bitmaprenderer",  
        options?: any,  
    ): [ImageBitmapRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmapRenderingContext/) | null;  
    [getContext](#getcontext-3)(contextId: "webgl", options?: any): [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | null;  
    [getContext](#getcontext-4)(  
        contextId: "webgl2",  
        options?: any,  
    ): [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/) | null;  
    [getContext](#getcontext-5)(  
        contextId: [OffscreenRenderingContextId](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.OffscreenRenderingContextId/),  
        options?: any,  
    ): [OffscreenRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.OffscreenRenderingContext/) | null;  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends keyof [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: OffscreenCanvas, ev: [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [removeEventListener](#removeeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [transferToImageBitmap](#transfertoimagebitmap-1)(): [ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/);  
}

#### Hierarchy

-   EventTarget
    -   OffscreenCanvas

##### Index

### Properties[](#properties)

[height](#height) [oncontextlost](#oncontextlost) [oncontextrestored](#oncontextrestored) [width](#width)

### Methods[](#methods)

[addEventListener](#addeventlistener) [convertToBlob](#converttoblob) [dispatchEvent](#dispatchevent) [getContext](#getcontext) [removeEventListener](#removeeventlistener) [transferToImageBitmap](#transfertoimagebitmap)

## Properties[](#properties-1)

### height[](#height)

height: number

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

[MDN Reference](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/height)

### oncontextlost[](#oncontextlost)

oncontextlost: ((this: OffscreenCanvas, ev: Event) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/contextlost_event)

### oncontextrestored[](#oncontextrestored)

oncontextrestored: ((this: OffscreenCanvas, ev: Event) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/contextrestored_event)

### width[](#width)

width: number

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

[MDN Reference](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/width)

## Methods[](#methods-1)

### addEventListener[](#addeventlistener)

-   addEventListener<[K](#addeventlistenerk) extends keyof [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: OffscreenCanvas, ev: [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-1)
    
    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](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)
    
    #### Parameters
    
    -   type: [K](#addeventlistenerk)
    -   listener: (this: OffscreenCanvas, ev: [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\[[K](#addeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    
-   addEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-2)
    
    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](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    

### convertToBlob[](#converttoblob)

-   convertToBlob(options?: [ImageEncodeOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageEncodeOptions/)): Promise<Blob\>[](#converttoblob-1)
    
    The **`OffscreenCanvas.convertToBlob()`** method creates a Blob object representing the image contained in the canvas.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/convertToBlob)
    
    #### Parameters
    
    -   `Optional`options: [ImageEncodeOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageEncodeOptions/)
    
    #### Returns Promise<Blob\>
    

### dispatchEvent[](#dispatchevent)

-   dispatchEvent(event: Event): boolean[](#dispatchevent-1)
    
    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](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)
    
    #### Parameters
    
    -   event: Event
    
    #### Returns boolean
    
    Inherited from EventTarget.dispatchEvent
    

### getContext[](#getcontext)

-   getContext(  
        contextId: "2d",  
        options?: any,  
    ): [OffscreenCanvasRenderingContext2D](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasRenderingContext2D/) | null[](#getcontext-1)
    
    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](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/getContext)
    
    #### Parameters
    
    -   contextId: "2d"
    -   `Optional`options: any
    
    #### Returns [OffscreenCanvasRenderingContext2D](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasRenderingContext2D/) | null
    
-   getContext(  
        contextId: "bitmaprenderer",  
        options?: any,  
    ): [ImageBitmapRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmapRenderingContext/) | null[](#getcontext-2)
    
    #### Parameters
    
    -   contextId: "bitmaprenderer"
    -   `Optional`options: any
    
    #### Returns [ImageBitmapRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmapRenderingContext/) | null
    
-   getContext(contextId: "webgl", options?: any): [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | null[](#getcontext-3)
    
    #### Parameters
    
    -   contextId: "webgl"
    -   `Optional`options: any
    
    #### Returns [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | null
    
-   getContext(contextId: "webgl2", options?: any): [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/) | null[](#getcontext-4)
    
    #### Parameters
    
    -   contextId: "webgl2"
    -   `Optional`options: any
    
    #### Returns [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/) | null
    
-   getContext(  
        contextId: [OffscreenRenderingContextId](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.OffscreenRenderingContextId/),  
        options?: any,  
    ): [OffscreenRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.OffscreenRenderingContext/) | null[](#getcontext-5)
    
    #### Parameters
    
    -   contextId: [OffscreenRenderingContextId](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.OffscreenRenderingContextId/)
    -   `Optional`options: any
    
    #### Returns [OffscreenRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.OffscreenRenderingContext/) | null
    

### removeEventListener[](#removeeventlistener)

-   removeEventListener<[K](#removeeventlistenerk) extends keyof [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: OffscreenCanvas, ev: [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-1)
    
    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](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)
    
    #### Parameters
    
    -   type: [K](#removeeventlistenerk)
    -   listener: (this: OffscreenCanvas, ev: [OffscreenCanvasEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.OffscreenCanvasEventMap/)\[[K](#removeeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    
-   removeEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-2)
    
    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](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    

### transferToImageBitmap[](#transfertoimagebitmap)

-   transferToImageBitmap(): [ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/)[](#transfertoimagebitmap-1)
    
    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](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/transferToImageBitmap)
    
    #### Returns [ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/)