Version: 2.69.0

Canvas

THEOplayer > Canvas

Canvas interface

The canvas API which allows drawing the player's current frame to a 2D or WebGL context.

Signature:
export interface Canvas

Methods

MethodDescription
drawImage(context2D, dx, dy)Draw the current frame to a 2D Canvas context.
drawImage(context2D, dx, dy, dWidth, dHeight)Draw the current frame to a 2D Canvas context.
drawImage(context2D, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)Draw the current frame to a 2D Canvas context.
texImage2D(contextWebGL, target, level, internalformat, format, type)Draw the current frame as a 2D texture to a 3D WebGL context.

Remarks

This allows for advanced usages of the images, like transformations, drawing and cropping.

Cross-origin restrictions: Browsers place additional security restrictions for cross-origin video content drawn to a canvas. When you draw video content retrieved without proper cross-origin settings to a canvas, the canvas becomes "tainted". A tainted canvas can still be used, but will throw errors when attempting to read pixel data from it (for example when calling `getImageData` or `toBlob`).

In order to avoid tainting the canvas, the video content must be retrieved with the proper CORS settings. Set crossOrigin to "anonymous" or "use-credentials" in the TypedSource of your SourceDescription when loading the video source into THEOplayer. This ensures that the content is always retrieved with CORS-enabled HTTP requests, and will not taint the canvas when drawn.

Drawing cross-origin content to WebGL context on iOS 10 and lower: iOS version 10 and lower has a bug that prevents drawing cross-origin video content to a `WebGLRenderingContext`, even when the proper CORS settings are provided (WebKit bug #135379). In particular, cross-origin 360° videos (using the VR API) only render correctly in iOS 11 and higher.

If you need to support iOS 10 and below, we recommend loading the stream from the same origin as the web page.

DRM protected content: It is not possible to render DRM protected content to a canvas.

Available since v2.12.0.