-
Notifications
You must be signed in to change notification settings - Fork 4
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.
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.
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.
Defines an RGB color.
var color = new Color(255, 255, 255);Returns: (string) color formatted as an RGB string
Returns: (string) color formatted as an RGBA string with given opacity
Sets the values of red, green, and blue based on the values given in an RGB string.
The red value for the color.
The green value for the color.
The blue value for the color.
Defines a point in an orthographic coordinate system.
var point = new OrthographicPoint(x, y);Converts orthographic coordinates to isometric coordinates on given Grid object.
Returns: (IsometricPoint) converted coordinates
Converts orthographic coordinates to integer isometric coordinates on given Grid object.
Returns: (IsometricPoint) converted coordinates as integers
Horizontal coordinate for the point.
Vertical coordinate for the point.
Defines a point in an isometric coordinate system.
var point = new IsometricPoint(x, y);Converts isometric coordinates to orthographic coordinates on given Grid object.
Returns: (OrthographicPoint) converted coordinates
Horizontal coordinate for the point.
Vertical coordinate for the point.
Defines the canvas where graphics are drawn.
var canvasElement = $('canvas').get(0);
var context = canvasElement.getContext('2d');
var canvas = new Canvas(canvasElement, context);Clears the entire canvas.
Represents the <canvas> HTML element.
Represents the HTML5 canvas context on which graphics are drawn.