Graphics API

Dominion includes a graphics API used for drawing isometric graphics on the HTML5 canvas. It is used in everything from drawing the grid to converting between orthographic and isometric coordinate systems.

What does orthographic/isometric mean?

Orthography or an orthographic projection refers to a 2d coordinate system where x is the horizontal coordinate and y is the vertical coordinate. Pixels on a screen are located on an orthographic coordinate system, and it is used for drawing graphics on the canvas. Orthographic coordinates will sometimes be referred to as real-world or screen coordinates.

Isometry or an isometric projection is used to represent 3d objects on a 2d grid. Objects appear tipped towards the viewer at 30º. Isometric coordinates (x, y, z) are used to represent a point in 3d space, therefore it is necessary to convert them to orthographic before drawing them on the screen.

OrthographicPoint object

Defines a point in an orthographic coordinate system.

var point = new OrthographicPoint(x, y);

Methods

OrthographicPoint.toIsometricPoint(OrthographicPoint origin)

Converts orthographic coordinates to isometric coordinates with given origin. Returns an IsometricPoint object.

Properties

OrthographicPoint.x (float)

Horizontal coordinate for the point.

OrthographicPoint.y (float)

Vertical coordinate for the point.

IsometricPoint object

Defines a point in an isometric coordinate system.

var point = new IsometricPoint(x, y);

Methods

IsometricPoint.toOrthographicPoint(OrthographicPoint origin)

Converts isometric coordinates to orthographic coordinates with given origin. Returns an OrthographicPoint object.

Properties

IsometricPoint.x (float)

Horizontal coordinate for the point.

IsometricPoint.y (float)

Vertical coordinate for the point.

Canvas object

Defines the canvas where graphics are drawn.

var canvasElement = $('canvas');
var context = canvasElement.getContext('2d');
var canvas = new Canvas(canvasElement, context);

Methods

Properties

Canvas.element (Element DOM Object)

Represents the HTML element.

Canvas.context (CanvasRenderingContext2D HTML5 Object)

Represents the HTML5 canvas context on which graphics are drawn.

Grid object

The Grid class defines an isometric grid. When Dominion loads, it creates a new Grid object to manage the grid.

var grid = new Grid();

Methods

Grid.center()

Returns the grid origin to the center of the canvas.

Grid.centerOnPoint(IsometricPoint point)

Moves the isometric point to the center of the canvas.

Properties

Grid.origin (OrthographicPoint)

Represents the orthographic point where the isometric point is (0, 0).