3a. Canvas renderer

The canvas renderer interface

A BETA.js canvas renderer object is essentially a more convenient wrapper for an HTMLCanvasElement, with direct access to some extra data properties and, most importantly, many functions for rendering on the canvas.

Conventions

Positions and sizes are in pixels. The origin (0, 0) is at the top-left of the canvas, the positive x-axis goes to the right, and the positive y-axis goes downwards.

Angles start at on the positive x-axis, passing the positive y-axis at 90°. As such, 0° points right, 90° points down, 180° points left and 270° points up.

A color parameter accepts either a CSS color value, a BETA.js color object, a CanvasGradient or a CanvasPattern. See 2a. Colors for details about color representation.

For the purposes of this documentation page, an instance of a BETA.js canvas renderer object will be referred to as renderer.

BETA.getRenderer(id)

Constructs a renderer object from a <canvas> element with the specified id atrribute.

var renderer = BETA.getRenderer("myCanvas");

Data properties

renderer.id

Contains the HTML id attribute of the element.

renderer.canvas

Contains the HTMLCanvasElement which is rendered upon.

renderer.context

Contains the CanvasRenderingContext2D, which provides the base API used in all rendering functions.

renderer.width

Contains the width of the canvas, in pixels. Changing this property won't have any effect on the canvas.

renderer.height

Contains the height of the canvas, in pixels. Changing this property won't have any effect on the canvas.

renderer.size

Contains a vector representing the size of the canvas, in pixels. Changing this property won't have any effect on the canvas.