Table of Contents

Class OffscreenCanvas

Namespace
CSharpToJavaScript.APIs.JS
Assembly
CSharpToJavaScript.dll

The OffscreenCanvas interface provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the canvas element is no longer entirely dependent on the DOM.
Rendering operations can also be run inside a worker context, allowing you to run some tasks in a separate thread and avoid heavy work on the main thread.

[Value("OffscreenCanvas")]
public class OffscreenCanvas : EventTarget
Inheritance
OffscreenCanvas
Inherited Members

Remarks

OffscreenCanvas is a transferable object.

-CanvasRenderingContext2D
-OffscreenCanvasRenderingContext2D
-ImageBitmap
-ImageBitmapRenderingContext
-TransferControlToOffscreen()
-Window.RequestAnimationFrame
-WebGL Off the Main Thread – Mozilla Hacks (2016)

See also on MDN

Constructors

OffscreenCanvas() 

public OffscreenCanvas()

OffscreenCanvas(ulong, ulong)

The OffscreenCanvas() constructor returns a newly instantiated OffscreenCanvas object.

public OffscreenCanvas(ulong width, ulong height)

Parameters

width ulong
height ulong

Remarks

-OffscreenCanvas, the interface this constructor belongs to

See also on MDN

Properties

Height

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

[Value("height")]
public ulong Height { get; set; }

Property Value

ulong

A positive integer representing the height of the offscreen canvas in CSS pixels.

Remarks

-OffscreenCanvas, the interface this property belongs to.

See also on MDN

Oncontextlost 

[Value("oncontextlost")]
public EventHandlerNonNull Oncontextlost { get; set; }

Property Value

EventHandlerNonNull

Oncontextrestored 

[Value("oncontextrestored")]
public EventHandlerNonNull Oncontextrestored { get; set; }

Property Value

EventHandlerNonNull

Width

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

[Value("width")]
public ulong Width { get; set; }

Property Value

ulong

A positive integer representing the width of the offscreen canvas in CSS pixels.

Remarks

-OffscreenCanvas, the interface this property belongs to.

See also on MDN

Methods

ConvertToBlob(ImageEncodeOptions)

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

[Value("convertToBlob")]
public Task<Blob> ConvertToBlob(ImageEncodeOptions options = null)

Parameters

options ImageEncodeOptions

Returns

Task<Blob>

A {{jsxref("Promise")}} returning a Blob object representing the image contained in the canvas.

Remarks

The desired file format and image quality may be specified.
If the file format is not specified, or if the given format is not supported, then the data will be exported as image/png.
Browsers are required to support image/png; many will support additional formats including image/jpeg and image/webp.

The created image will have a resolution of 96dpi for file formats that support encoding resolution metadata.

-The interface defining this method, OffscreenCanvas.

See also on MDN

GetContext(OffscreenRenderingContextId, dynamic)

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.

[Value("getContext")]
public Union79? GetContext(OffscreenRenderingContextId contextId, dynamic options = null)

Parameters

contextId OffscreenRenderingContextId
options dynamic

Returns

Union79?

A rendering context which is either aIf the context identifier is not supported, or the canvas has already been set to a different context mode, null is returned.

Remarks

-The interface defining this method: OffscreenCanvas
-GetContext(string, dynamic)
-Available rendering contexts: CanvasRenderingContext2D, WebGLRenderingContext, WebGL2RenderingContext, ImageBitmapRenderingContext, and OffscreenCanvasRenderingContext2D

See also on MDN

TransferToImageBitmap()

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.

[Value("transferToImageBitmap")]
public ImageBitmap TransferToImageBitmap()

Returns

ImageBitmap

A newly-allocated ImageBitmap.This ImageBitmap references a potentially large graphics resource, and to ensure your web application remains robust, it is important to avoid allocating too many of these resources at any point in time. For this reason it is important to ensure that the ImageBitmap is either consumed or closed.As described in the OffscreenCanvas examples, passing this ImageBitmap to TransferFromImageBitmap(ImageBitmap?) consumes the ImageBitmap object; it no longer references the underlying graphics resource, and can not be passed to any other web APIs.If your goal is to pass the ImageBitmap to other web APIs which do not consume it - for example, CanvasRenderingContext2D.DrawImage - then you should close it when you're done with it by calling Close(). Don't simply drop the JavaScript reference to the ImageBitmap; doing so will keep its graphics resource alive until the next time the garbage collector runs.If you call transferToImageBitmap() and don't intend to pass it to TransferFromImageBitmap(ImageBitmap?), consider whether you need to call transferToImageBitmap() at all. Many web APIs which accept ImageBitmap also accept OffscreenCanvas as an argument.

Remarks

-The interface defining this method, OffscreenCanvas
-TransferFromImageBitmap(ImageBitmap?)

See also on MDN

Edit this page