JSCanvas Image Provider

The jscanvas Image Provider renders an image described by a Javascript function.

Field name	Value	Description
Required fields
type	ImageProvider.Type	jscanvas
jscanvasdescription	JSCanvasDescription	An object describing the parameters and Javascript source.
Optional fields
width	Integer	The width of the rendered image. If not specified the width will be inferred from the tracks below.
height	Integer	The height of the rendered image. If not specified the height will be inferred from the tracks below.

JSCanvasDescription

Field name	Value	Description
Required fields
mode	JSCanvasDescription.Mode	jscanvas_script | jscanvas_source
script	StringVariable	A String containing the Javascript source.
source	FileLocation	A FileLocation indicating the source.
Optional fields
defaultparams	KeyValuePair [ ]	A map of keys and values send to the Javascript function
keys	String [ ]	A list of HTTP query parameter names to foraward to the Javascript function
completionfunction	Function	Function to use to animate time. (Advanced)

You must supply a function called renderFrame that accepts four parameters

function renderFrame(ctx, frameno, renderinfo, params)
{
    // render function
}

The parameter of the function are

Parameter	Description
ctx	Canvas context
frameno	current frame number
renderinfo	Object {frameno: int, completion: float} The property completion is float between 0 and 1, indicating the percentage of time passed for this scene. It is controlled by the completion function in the ImageProvider.
params	Object with the query parameters indicated by keys

Example

{
    "scenes": [
        {
            "tracks": [
                {
                    "content": {
                        "type": "emptyimage",
                        "color": {
                            "red": 0,
                            "green": 0,
                            "blue": 0,
                            "alpha": 255
                        }
                    }
                },
                {
                    "content": {
                        "type": "jscanvas",
                        "width": 640,
                        "height": 360,
                        "jscanvasdescription": {
                            "script": {
                                "type": "constant",
                                "value": "function renderFrame( ctx, frameno, renderinfo, params ) { ctx.fillStyle='#f00'; ctx.font='100px Arial'; ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); ctx.rotate( renderinfo.completion*2*Math.PI ); ctx.fillText('hallo', 0, 0 ); }"
                            },
                            "completionfunction": {
                                "type": "linear"
                            }
                        }
                    }
                }
            ],
            "numframes": 100
        }
    ],
    "params": {
        "vparams": {
            "width": 640,
            "height": 360
        }
    }
}