logo

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 

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.

Methods

Method

Description

drawImage​(context2D: CanvasRenderingContext2D, dx: number, dy: number): boolean

Draw the current frame to a 2D Canvas context.

drawImage​(context2D: CanvasRenderingContext2D, dx: number, dy: number, dWidth: number, dHeight: number): boolean

Draw the current frame to a 2D Canvas context.

drawImage​(context2D: CanvasRenderingContext2D, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): boolean

Draw the current frame to a 2D Canvas context.

texImage2D​(contextWebGL: WebGLRenderingContext, target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum): boolean

Draw the current frame as a 2D texture to a 3D WebGL context.

Method Details

drawImage

Draw the current frame to a 2D Canvas context.

Signature:

drawImage(context2D: CanvasRenderingContext2D, dx: number, dy: number): boolean;

Parameters

Parameter

Type

Description

context2D

CanvasRenderingContext2D

The 2D destination context.

dx

number

The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

number

The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

Remarks


- If the video hasn't loaded yet, nothing will be drawn.
- The first argument is the destination 2D context for the draw operation. The other arguments are passed to the native CanvasRenderingContext2D.drawImage method.
- see CanvasRenderingContext2D.drawImage().

drawImage

Draw the current frame to a 2D Canvas context.

Signature:

drawImage(context2D: CanvasRenderingContext2D, dx: number, dy: number, dWidth: number, dHeight: number): boolean;

Parameters

Parameter

Type

Description

context2D

CanvasRenderingContext2D

The 2D destination context.

dx

number

The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

number

The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

dWidth

number

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dHeight

number

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

Remarks


- If the video hasn't loaded yet, nothing will be drawn.
- The first argument is the destination 2D context for the draw operation. The other arguments are passed to the native CanvasRenderingContext2D.drawImage method.
- see CanvasRenderingContext2D.drawImage().

drawImage

Draw the current frame to a 2D Canvas context.

Signature:

drawImage(context2D: CanvasRenderingContext2D, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): boolean;

Parameters

Parameter

Type

Description

context2D

CanvasRenderingContext2D

The 2D destination context.

sx

number

The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

number

The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sWidth

number

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.

sHeight

number

The height of the sub-rectangle of the source image to draw into the destination context.

dx

number

The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

number

The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

dWidth

number

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dHeight

number

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

Remarks


- If the video hasn't loaded yet, nothing will be drawn.
- The first argument is the destination 2D context for the draw operation. The other arguments are passed to the native CanvasRenderingContext2D.drawImage method.
- see CanvasRenderingContext2D.drawImage().

texImage2D

Draw the current frame as a 2D texture to a 3D WebGL context.

Signature:

texImage2D(contextWebGL: WebGLRenderingContext, target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum): boolean;

Parameters

Parameter

Type

Description

contextWebGL

WebGLRenderingContext

The WebGL context.

target

GLenum

A GLenum specifying the binding point (target) of the active texture.

level

GLint

A GLint specifying the level of detail. Level 0 is the base image level and level n is the nth mipmap reduction level.

internalformat

GLint

A GLenum specifying the color components in the texture.

format

GLenum

A GLenum specifying the format of the texel data.

type

GLenum

A GLenum specifying the data type of the texel data.

Remarks


- If the video hasn't loaded yet, nothing will be drawn.
- The first argument is the destination WebGL context for the draw operation. The other arguments are passed to the native WebGLRenderingContext.texImage2D method.
- See WebGLRenderingContext.texImage2D().

github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2020. All Rights Reserved.
Leuven
New York
San Francisco
Singapore
Barcelona