3b. Canvas configuration

Canvas configuration functions

Functions for changing the orientation of the canvas being rendered upon, as well as the underlying coordinate system.
Note: Functions which change the coordinate system do not change the orientation of the <canvas> element.

renderer.resize(x, y)

Resizes the renderer canvas, including its CSS size, to a certain size, in pixels.

var renderer = BETA.getRenderer("myCanvas");
renderer.resize(1920, 1080);

renderer.resizeByVector(vector)

Resizes the renderer canvas, including its CSS size, to a certain size, in pixels.

var renderer = BETA.getRenderer("myCanvas");
renderer.resizeByVector({x: 1920, y: 1080});

renderer.resizeToMax()

Resizes the renderer canvas, including its CSS size, to the size of the browser window.

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

renderer.translate(x, y)

Moves the origin of the coordinate system by a certain number of pixels.

var renderer = BETA.getRenderer("myCanvas");
renderer.translate(-200, 100);

renderer.translateByVector(vector)

Moves the origin of the coordinate system by a certain number of pixels.

var renderer = BETA.getRenderer("myCanvas");
renderer.translateByVector({x: -200, y: 100});

renderer.scale(x, y)

Scales the coordinate system axes by a factor each.

var renderer = BETA.getRenderer("myCanvas");
renderer.scale(2, 1.5);

renderer.scaleByVector(vector)

Scales the coordinate system axes by a factor each.

var renderer = BETA.getRenderer("myCanvas");
renderer.scaleByVector({x: 2, y: 1.5});

renderer.rotate(degrees)

Rotates the coordinate system around the origin by an angle in degrees.

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

renderer.rotateRad(radians)

Rotates the coordinate system around the origin by an angle in radians.

var renderer = BETA.getRenderer("myCanvas");
renderer.rotateRad(Math.PI/2);

renderer.save()

Saves the orientation of the current coordinate system, and pushes it onto a stack.

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

renderer.save(); //default state saved
renderer.rotate(90);
renderer.scale(2, 2);

renderer.restore()

Reverts the coordinate system to the previously saved orientation, and removes it from the stack.

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

renderer.save(); //default state saved
renderer.rotate(90);
renderer.scale(2, 2);

renderer.restore(); //reverted to default state