3c. Rendering

Canvas rendering functions

Functions for, unsurprisingly, rendering shapes and other various graphical constructs to the canvas.

renderer.line(posA, posB, thickness, color)

Draws a line between two points on the canvas.

var renderer = BETA.getRenderer("myCanvas");
renderer.line({x: 30, y: 30}, {x: 20, y: 50}, 1, "Black");

renderer.fillCircle(pos, radius, color)

Draws a filled circle on the canvas.

var renderer = BETA.getRenderer("myCanvas");
renderer.fillCircle({x: 100, y: 50}, 50, "Red");

renderer.lineCircle(pos, radius, thickness, color)

Draws the circumference of a circle on the canvas.

var renderer = BETA.getRenderer("myCanvas");
renderer.lineCircle({x: 100, y: 50}, 50, 2, "#AAA");

renderer.fillSector(pos, radius, startAngle, endAngle, color)

Draws a filled circle sector on the canvas.

var renderer = BETA.getRenderer("myCanvas");
renderer.fillSector({x: 100, y: 50}, 50, 90, 135, "Blue")

renderer.lineSector(pos, radius, startAngle, endAngle, thickness, color)

Draws the outline of a circle sector on the canvas.

var renderer = BETA.getRenderer("myCanvas");
renderer.lineSector({x: 100, y: 50}, 50, 90, 135, 1, "#303030");

renderer.arc(pos, radius, startAngle, endAngle, thickness, color)

Draws a circle arc on the canvas.

var renderer = BETA.getRenderer("myCanvas");
renderer.arc({x: 100, y: 50}, 50, 90, 135, 1, "#303030");

renderer.fillRect(pos, size, color)

Draws a filled rectangle on the canvas.

var renderer = BETA.getRenderer("myCanvas");
renderer.fillRect({x: 50, y: 30}, {x: 30, y: 50}, BETA.hwb(270, 30, 0));

renderer.lineRect(pos, size, thickness, color)

Draws the perimeter of a rectangle on the canvas.

var renderer = BETA.getRenderer("myCanvas");
renderer.lineRect({x: 50, y: 30}, {x: 30, y: 50}, BETA.hwb(0, 30, 100));

renderer.fillPolygon(posArray, color)

Draws a filled polygon on the canvas. posArray is an array of vectors which defines the vertices of the polygon.

var renderer = BETA.getRenderer("myCanvas");
renderer.fillPolygon([{x: 50, y: 30}, {x: 100, y: 20}, {x: 70, y: 70}], "rgb(150, 75, 0)");

renderer.linePolygon(posArray, thickness, color)

Draws the perimeter of a polygon on the canvas. posArray is an array of vectors which defines the vertices of the polygon.

var renderer = BETA.getRenderer("myCanvas");
renderer.fillPolygon([{x: 50, y: 30}, {x: 100, y: 20}, {x: 70, y: 70}], 3, "rgb(75, 75, 75)");

renderer.clear()

Clears the entire canvas of any colored pixels. Mostly used for rendering multiple frames after one another.

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

renderer.clearRect(pos, size)

Clears a rectangular portion of the canvas of any colored pixels.

var renderer = BETA.getRenderer("myCanvas");
renderer.clearRect({x: 50, y: 30}, {x: 30, y: 50});

renderer.fill(color)

Fills the entire canvas with the same color or pattern.

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

renderer.drawImage(img, pos, [size])

Renders a image (specifically, a CanvasImageSource) on the canvas. If a size is provided, the image is resized to fit that size. If not, the image is rendered at its default size.
Note: Make sure the image being drawn is fully loaded, or the whole image may not be correctly rendered.

var renderer = BETA.getRenderer("myCanvas");
var image = document.getElementById("myImage");
renderer.drawImage(image, {x: 50: y: 30}, {x: 400, y: 300});

renderer.text(pos, text, font, size, color)

Renders some text on the canvas in a given font. The font is specified as a string representing a CSS font, and the font size is in CSS pixels.

var renderer = BETA.getRenderer("myCanvas");
renderer.text({x: 100, y: 100}, "Hello world!", "Arial", 16, "Black");

renderer.getTextWidth(text, font, size)

Measures the width of some text in pixels. Useful for centering or aligning text horizontally.

var renderer = BETA.getRenderer("myCanvas");
renderer.getTextWidth("Hello world!", "Arial", 16); // 83.58333587646484