canvas

The canvas plugin replaces the <video> element with a <canvas> element that can be manipulated.

See: HTMLCanvasElement, CanvasRenderingContext2D
Example

// This function will invert the video frame and draw onto canvas
function drawInvertedFrame(canvas, context, video) {
    if (!canvas || !context || !video || !video.videoWidth || !video.videoHeight) {
        return;
    }

    // Draw the original video frame onto canvas
    context.drawImage(
        video,              // Source
        0,                  // Source X
        0,                  // Source Y
        video.videoWidth,   // Source Width
        video.videoHeight,  // Source Height
        0,                  // Destination X
        0,                  // Destination Y
        canvas.width,       // Destination Width
        canvas.height       // Destination Height
    );

    // Grab the original frame's image data
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;

    // Invert the pixels
    for (var i = 0; i < data.length; i += 4) {
        data[i]     = 255 - data[i];     // Red
        data[i + 1] = 255 - data[i + 1]; // Green
        data[i + 2] = 255 - data[i + 2]; // Blue
    }

    // Draw the inverted frame onto canvas
    context.putImageData(imageData, 0, 0);
}

if (player.canvas.isSupported()) {
    player.canvas.init({drawFrame: drawInvertedFrame});
} else {
    console.warn('Canvas plugin is not supported on current environment.');
}

Init Options

options : object

Initialization options for the canvas plugin.

options.autoResize : boolean
property

If true, canvas will automatically resize itself at runtime to video dimensions (which can change dynamically).

Default: true
Example

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "autoResize": false,
            "width": 1920,
            "height" 1080
        }
    }
}

options.width : boolean
property

The initial width of the canvas element.

Default: 1280
Example

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "autoResize": false,
            "width": 1920,
            "height" 1080
        }
    }
}

options.height : boolean
property

The initial height of the canvas element.

Default: 720
Example

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "autoResize": false,
            "width": 1920,
            "height" 1080
        }
    }
}

options.fps : number
property

The framerate of drawFrame invocations (frames per second).
This fps value will be used if no options.fps value given on init call.

Default: 40
Example

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "fps": 30
        }
    }
}

options.offscreenVideoCanvasEnabled : boolean
property

If true, will manage an offscreen canvas as a proxy to the video.
In many cases, this provides a performance improvement.
The offscreen canvas will be the 3rd argument to the drawFrame function.
Default value is dynamic (according to environment).

options.performanceOptimizationEnabled : boolean
property

If true, will optimize for quick canvas drawing.
Disables image smoothing and rounds all numbers on CanvasRenderingContext2D.drawImage() calls.

Default: true

options.drawFrame : drawFrame
property

A drawFrame callback function.
This function will be used if no options.drawFrame function given on init call.

Example

player.initPlugin('canvas', {
    drawFrame: function(canvas, context, video) {
        if (!canvas || !context || !video || !video.videoWidth || !video.videoHeight) {
            return;
        }

        // Draw the original video frame onto canvas
        context.drawImage(
            video,              // Source
            0,                  // Source X
            0,                  // Source Y
            video.videoWidth,   // Source Width
            video.videoHeight,  // Source Height
            0,                  // Destination X
            0,                  // Destination Y
            canvas.width,       // Destination Width
            canvas.height       // Destination Height
        );
    }
});

options.contextType : string
property

The contextType to be passed to getContext().
This will affect the type of context created on init.
Possible values are:

  • 2d - Default
  • webgl (or experimental-webgl)
  • webgl2 (or experimental-webgl2)
  • bitmaprenderer

Default: "2d"
See: context
Example

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "contextType": "webgl"
        }
    }
}

options.contextAttributes : object
property

The contextAttributes to be passed to getContext().
This will affect the properties/behavior of the context created on init.

Default: null
Example

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "contextType": "webgl",
            "contextAttributes": {
                "alpha": true
            }
        }
    }
}

Properties

player.canvas.canvas : HTMLCanvasElement
propertyreadonly

A getter for the <canvas> element.
Will be null if init was not called or canvas was disposed.

Example

if (player.canvas.canvas) {
    console.log(`Canvas dimensions: ${player.canvas.canvas.width} x ${player.canvas.canvas.height}`);
}

player.canvas.context : RenderingContext
propertyreadonly

A getter for the rendering context associated with the canvas.
Will be null if init was not called or canvas was disposed.

See: CanvasRenderingContext2D

player.canvas.version : string
propertyreadonly

The canvas plugin’s version string.

Example

console.log('The canvas plugin version is', player.canvas.version);

Methods

player.canvas.isSupported() ⇒ boolean
method

Checks whether the canvas plugin is supported on current environment and returns a boolean value.

Returns: boolean - True if plugin is supported on current environment/engine, false otherwise.
Example

if (player.canvas.isSupported()) {
    player.canvas.init({drawFrame: myDrawFrameCallbackFunction});
} else {
    alert('No canvas plugin for you!');
}

player.canvas.init([options])
method

Initialize the canvas plugin by replacing the <video> element with a <canvas> element.

Param Type Description
[options] object An options object.
[options.drawFrame] drawFrame A draw frame function that will be invoked every frame. See drawFrame.
[options.fps] number Frequency of drawFrame invocations (number of frames per seconds). See fps.
[options.autoResize] boolean If true, canvas will automatically resize itself at runtime to video dimensions (which can change dynamically). See autoResize.
[options.width] number The initial width of the canvas element. See width.
[options.height] number The initial height of the canvas element. See height.
[options.contextType] string The contextType to be passed to getContext(). See contextType.
[options.contextAttributes] object The contextAttributes to be passed to getContext(). See contextAttributes.

Example

player.canvas.init({
    fps: 30,
    contextType: '2d',
    drawFrame: function drawInvertedFrame(canvas, context, video) {
        if (!canvas || !context || !video || !video.videoWidth || !video.videoHeight) {
            return;
        }

        // Draw the original video frame onto canvas
        context.drawImage(
            video,              // Source
            0,                  // Source X
            0,                  // Source Y
            video.videoWidth,   // Source Width
            video.videoHeight,  // Source Height
            0,                  // Destination X
            0,                  // Destination Y
            canvas.width,       // Destination Width
            canvas.height       // Destination Height
        );

        // Grab the original frame's image data
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;

        // Invert the pixels
        for (var i = 0; i < data.length; i += 4) {
            data[i]     = 255 - data[i];     // Red
            data[i + 1] = 255 - data[i + 1]; // Green
            data[i + 2] = 255 - data[i + 2]; // Blue
        }

        // Draw the inverted frame onto canvas
        context.putImageData(imageData, 0, 0);
    }
});

player.canvas.dispose()
method

Dispose of the canvas and context, and restore the original <video> element.

Example

player.canvas.dispose();

Callbacks

drawFrame : function
callback

A callback function that will be invoked on every frame.

Param Type Description
canvas HTMLCanvasElement The canvas object. Note that canvas size may change between invocations (canvas is resized according to video size, which is adaptive).
context RenderingContext The rendering context associated with canvas.
video HTMLVideoElement The source <video> object.

Example

function(canvas, context, video) {
    if (!canvas || !context || !video || !video.videoWidth || !video.videoHeight) {
        return;
    }

    // Draw the original video frame onto canvas
    context.drawImage(
        video,              // Source
        0,                  // Source X
        0,                  // Source Y
        video.videoWidth,   // Source Width
        video.videoHeight,  // Source Height
        0,                  // Destination X
        0,                  // Destination Y
        canvas.width,       // Destination Width
        canvas.height       // Destination Height
    );
}
Rate this page: X
Tell us more!