Back to Top

CanvasToVideo master

An experiment in converting Canvas animations to video.

putRequest(url, data[, callback]) private function

Sends a PUT request to a URL with the specified data and fires a callback upon completion.

putRequest('capture.php', [], function() { alert('Done!'); });

Parameters

Name Type Description
url String

The URL for the PUT request.

data Object

The data to send.

callback Function

The callback function to call once the request has completed.

Optional

Returns

CanvasToVideo(url, canvas)

Creates a new CanvasToVideo object.

var ctv = new CanvasToVideo('capture.php', document.querySelector('canvas'));

Parameters

Name Type Description
url String

The URL for all PUT requests.

canvas Object

The canvas to capture frames from.

Returns

Object

New CanvasToVideo object.

CanvasToVideo.capture()

Method called after canvas drawing has occured to capture frame and either send to server or store in local temporary cache.

function draw () {
    // draw objects to canvas
    ctv.capture();
    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

Returns

CanvasToVideo.flush()

Called once animation is complete to send all cached images to the server through the specified URL.

ctv.flush();

Returns

CanvasToVideo.setCanvas(canvas)

Sets a new canvas tag once the CanvasToVideo object has already been created.

ctv.setCanvas(document.querySelector('.stage'));

Parameters

Name Type Description
canvas Object

The canvas to capture frames from.

Returns

CanvasToVideo.setCacheEnabled(enabled)

Sets if caching is enabled or not.

ctv.setCacheEnabled(true); // Caching enabled.
ctv.setCacheEnabled(false); // Caching disabled.

Parameters

Name Type Description
enabled Boolean

Boolean flag for enabling cache.

Returns

CanvasToVideo.setEndpoint(url)

Sets a new URL for sending all PUT requests.

ctv.setEndpoint('different_capture_url.php');

Parameters

Name Type Description
url String

The new URL for all PUT requests.

Returns

CanvasToVideo.setImageType(type)

Sets the image type saved from the canvas. Can be either image/png or image/jpeg.

ctv.setImageType('image/png');
ctv.setImageType('image/jpeg');

Parameters

Name Type Description
type String

The type of image to be captured from the canvas.

Returns

CanvasToVideo.setImageQuality(type)

Sets the image quality saved from the canvas. Must be an integer between 0 and 100.

ctv.setImageQuality(60);

Parameters

Name Type Description
type Integer

Number between 0 and 100 specifying the quality.

Returns