Class: Canvas

html.Canvas

Class representing a HTML5 canvas. It provides a context2d property for using the HTML5 Canvas API, and a fragmentShader property for GPU-driven rendering using a GLSL fragment shader.

new html.Canvas ()

canvas.js:99

Properties:

Name	Type	Description
`context2d`	object	[readonly] The 2D canvas context.
`originalHeight`	number	(default: `100`) The original unscaled height.
`originalWidth`	number	(default: `100`) The original unscaled width.
`fragmentShader`	string	(default: `""`) An optional GLSL fragment shader for rendering directly into the canvas.
`errorMessage`	string	(default: `""`) A shader-related error message.

Extends

html.Item

Methods

renderGL (measure)number async canvas.js:472

Renders using the configured fragment shader and returns the rendering time in nanoseconds precison, if measuring was requested and the platform supports it. Not all browsers may support the timer extension for measuring on all platforms, though.

Name	Type	Description
`measure`	bool	Whether to measure the rendering time.

Returns:

Type	Description
number	The rendering time in nanoseconds, if measuring was requested. This value is `-1` if not supported by platform, or measuring was not requested.

setSampler (name, width, height, value, parameters) canvas.js:205

Sets a 2D sampler (texture) value to pass to the fragment shader.

The parameters dictionary may contain these string entries:

wrap: [repeat|clamp|mirror, repeat|clamp|mirror]
filter: [linear|nearest, linear|nearest]
mipmap: [true|false] (Generate mipmap textures)
data: [true|false] (Use this for storing data textures)

Name	Type	Description
`name`	string	The name of the uniform. It must be defined by that name in the shader.
`width`	number	The width of the texture. This value is ignored if `value` is an image type.
`height`	number	The height of the texture. This value is ignored if `value` is an image type.
`value`	any	The texture value to set. Either an image type, or a `Float32Array` or a `Int32Array`.
`parameters`	object	A dictionary of parameters.

setUniform (type, name, value) canvas.js:141

Sets a uniform value to pass to the fragment shader.

When passing vectors and matrices, they must be of the form created by Shellfish's matrix tools.

Name	Type	Description
`type`	string	The type of uniform. Supported types are: `float\|int\|mat3\|mat4\|vec2\|vec3\|vec4`
`name`	string	The name of the uniform. It must be defined by that name in the shader.
`value`	any	The value to set.

See:

matrix

updateSampler (name, width, height, value) canvas.js:338

Updates an area of a sampler (texture). This allows updating a part of a texture without having to re-upload the full texture to the GPU.

Name	Type	Description
`name`	string	The name of the uniform. It must be defined by that name in the shader.
`width`	number	The width of the new area.
`height`	number	The height of the new area.
`value`	any	The texture value to set. Either an image type, or a `Float32Array` or a `Int32Array`.