# Facade(canvas, width, height)
Creates a new Facade.js object with either a preexisting canvas tag or a unique name, width, and height.
Parameters
Name | Types | Description |
---|---|---|
canvas | Object |
String |
width | Integer |
Width of the canvas. |
height | Integer |
Height of the canvas. |
Returns
Object
New Facade.js object.
# Facade._animate(time)
private method
Method called by requestAnimationFrame. Sets Facade.dt
, Facade.fps
and Facade.ftime
.
Parameters
Name | Types | Description |
---|---|---|
time | Integer |
DOMTimeStamp or DOMHighResTimeStamp (Google Chrome Only) |
Returns
Object
Facade.js object.
# Facade.addToStage(obj, options)
Draws a Facade.js entity (or multiple entities) to the stage.
Parameters
Name | Types | Description |
---|---|---|
obj | Object |
Array |
options | Object |
Temporary options for rendering a Facade.js entity (or multiple entities). |
Returns
Object
Facade.js object.
# Facade.Circle(options, options.anchor, options.counterclockwise, options.end, options.fillStyle, options.lineCap, options.lineJoin, options.lineWidth, options.opacity, options.radius, options.rotate, options.scale, options.start, options.strokeStyle, options.x, options.y)
Create a circle object. Inherits all methods from Facade.Polygon. var circle = new Facade.Circle({ x: 0, y: 0, radius: 100, lineWidth: 10, strokeStyle: '#333E4B', fillStyle: '#1C73A8', anchor: 'top/left' });
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Options to create the circle with. |
options.anchor | String |
Position to anchor the circle. Default: "top/left"
|
options.counterclockwise | Boolean |
Boolean determining if the circle will be drawn in a counter clockwise direction. Default: false |
options.end | Integer |
Degree at which the circle ends. Default: 360 |
options.fillStyle | String |
Fill color for the circle. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.lineCap | String |
The style of line cap. Default: "butt"
|
options.lineJoin | String |
The style of line join. Default: "miter"
|
options.lineWidth | Integer |
Width of the stroke. Default: 0 |
options.opacity | Integer |
Opacity of the circle. Integer between 0 and 100. Default: 100 |
options.radius | Integer |
Radius of the circle. Default: 0 |
options.rotate | Integer |
Degrees to rotate the circle. Default: 0 |
options.scale | Integer |
A float representing the scale of a circle. Default: 1 |
options.start | Integer |
Degree at which the circle begins. Default: 0 |
options.strokeStyle | String |
Color of a circle's stroke. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.x | Integer |
X coordinate to position the circle. Default: 0 |
options.y | Integer |
Y coordinate to position the circle. Default: 0 |
Returns
Object
New Facade.Circle object.
# Facade.Circle._configOptions(options)
private method
Custom configuration for options specific to a circle entity.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Complete set of circle specific options. |
Returns
Object
Converted options.
# Facade.Circle._getAnchorPoint(options, metrics)
private method
Returns an array of the x and y anchor positions based on given options and metrics.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Facade.Circle options. |
metrics | Object |
Facade.Circle metrics. |
Returns
Array
Array with the x and y anchor positions.
# Facade.Circle._setMetrics(updated)
private method
Set metrics based on the circle's options.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
Custom options used to render the circle. |
Returns
Object
Object with metrics as key-value pairs.
# Facade.draw(callback)
Sets a callback function to run in a loop using requestAnimationFrame or available polyfill. stage.draw(function () { this.clear(); this.addToStage(circle, { x: 100, y: 100 }); });
Parameters
Name | Types | Description |
---|---|---|
callback | Function |
Function callback. |
Returns
Object
Facade.js object.
# Facade.Entity()
The constructor for all Facade.js shape, image and text objects.
Returns
Object
New Facade.Entity object.
# Facade.Entity._applyTransforms(context, options, metrics)
private method
Applies transforms (translate, rotate and scale) to an entity.
Parameters
Name | Types | Description |
---|---|---|
context | Object |
Reference to the CanvasRenderingContext2D object. |
options | Object |
Facade.Entity options. |
metrics | Object |
Facade.Entity metrics. |
Returns
Void
# Facade.Entity._defaultMetrics(updated)
private method
Returns a default set of metrics common to all Facade.js entities.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
Additional metrics as key-value pairs. |
Returns
Object
Default set of metrics.
# Facade.Entity._defaultOptions(updated)
private method
Returns a default set of options common to all Facade.js entities.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
Additional options as key-value pairs. |
Returns
Object
Default set of options.
# Facade.Entity._getAnchorPoint(options, metrics)
private method
Returns an array of the x and y anchor positions based on given options and metrics.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Facade.Entity options. |
metrics | Object |
Facade.Entity metrics. |
Returns
Array
Array with the x and y anchor positions.
# Facade.Entity._getStrokeWidthOffset(options)
private method
Returns an integer for the stroke width offset. Used to calculate metrics.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Facade.Entity options. |
Returns
Integer
Integer representing the stroke width offset.
# Facade.Entity._setOption(key, value, test)
private method
Sets an option for a given entity.
Parameters
Name | Types | Description |
---|---|---|
key | String |
The option to update. |
value | Object |
Function |
test | Boolean |
Flag to determine if options are to be persisted in the entity or just returned. |
Returns
Object|Function|String|Integer
Returns value of the updated option.
# Facade.Entity.draw(facade, updated)
Renders an entity to a canvas.
Parameters
Name | Types | Description |
---|---|---|
facade | Object |
Facade.js object. |
updated | Object |
Temporary options for rendering a Facade.js entity. |
Returns
Void
# Facade.Entity.getAllMetrics()
Retrieves the value of all metrics. Only retrieves metrics set when creating a new Facade.js entity or using setOptions
not through temporary options set when using Facade.addToStage
.
Returns
Object
Object containing all metrics.
# Facade.Entity.getAllOptions()
Retrieves the value of all options. Only retrieves options set when creating a new Facade.js entity or using setOptions
not through temporary options set when using Facade.addToStage
.
Returns
Object
Object containing all options.
# Facade.Entity.getMetric(key)
Retrieves the value of a given metric. Only retrieves metrics set when creating a new Facade.js entity or using setOptions
not through temporary options set when using Facade.addToStage
.
Parameters
Name | Types | Description |
---|---|---|
key | String |
The name of the metric. |
Returns
Integer
Value of the metric requested.
# Facade.Entity.getOption(key)
Retrieves the value of a given option. Only retrieves options set when creating a new Facade.js entity or using setOptions
not through temporary options set when using Facade.addToStage
.
Parameters
Name | Types | Description |
---|---|---|
key | String |
The name of the option. |
Returns
Object|Function|String|Integer
Value of the option requested.
# Facade.Entity.setOptions(updated, test)
Sets a group of options as key-value pairs to an entity.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
The options to update. Does not need to be entire set of options. |
test | Boolean |
Flag to determine if options are to be persisted in the entity or just returned. |
Returns
Object
Updated options.
# Facade.exportBase64(type, quality)
Exports a base64 encoded representation of the current rendered canvas.
Parameters
Name | Types | Description |
---|---|---|
type | String |
Image format: image/png (Default), image/jpeg , image/webp (Google Chrome Only) |
quality | Integer |
Number between 0 and 100. |
Returns
String
Base64 encoded string.
# Facade.Group(options, options.anchor, options.rotate, options.scale, options.x, options.y)
Create a group object. Inherits all methods from Facade.Entity. var group = new Facade.Group({ x: 100, y: 100 }); group.addToGroup(polygon); group.addToGroup(circle); group.addToGroup(line); group.addToGroup(rect);
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Options to create the group with. |
options.anchor | String |
Position to anchor the group. Default: "top/left"
|
options.rotate | Integer |
Degrees to rotate the group. Default: 0 |
options.scale | Integer |
A float representing the scale of a group. Default: 1 |
options.x | Integer |
X coordinate to position a group. Default: 0 |
options.y | Integer |
Y coordinate to position a group. Default: 0 |
Returns
Object
New Facade.Group object.
# Facade.Group._configOptions(options)
private method
Custom configuration for options specific to a group entity.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Complete set of group specific options. |
Returns
Object
Converted options.
# Facade.Group._draw(facade, options, metrics)
private method
Renders a group of entities to a canvas.
Parameters
Name | Types | Description |
---|---|---|
facade | Object |
Facade.js object. |
options | Object |
Options used to render the group. |
metrics | Object |
Metrics used to render the group. |
Returns
Void
# Facade.Group._setMetrics(updated)
private method
Set metrics based on the groups's entities and options.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
Custom options used to render the group. |
Returns
Object
Object with metrics as key-value pairs.
# Facade.Group.addToGroup(obj)
Adds a Facade.js entity to a group.
Parameters
Name | Types | Description |
---|---|---|
obj | Object |
Array |
Returns
Void
# Facade.Group.hasEntity(obj)
Tests the existence of an entity within a group.
Parameters
Name | Types | Description |
---|---|---|
obj | Object |
Facade.js entity. |
Returns
Boolean
Boolean result of the test.
# Facade.Group.removeFromGroup(obj)
Removes a Facade.js entity from a group.
Parameters
Name | Types | Description |
---|---|---|
obj | Object |
Facade.js entity. |
Returns
Void
# Facade.height(height)
Gets and sets the canvas height.
Parameters
Name | Types | Description |
---|---|---|
height | Integer |
Height in pixels. |
Returns
Integer
Height in pixels.
# Facade.Image(source, options, options.anchor, options.callback, options.frames, options.height, options.loop, options.offsetX, options.offsetY, options.rotate, options.scale, options.speed, options.tileX, options.tileY, options.width, options.x, options.y)
Create an image object. Inherits all methods from Facade.Entity. var image = new Facade.Image('images/sprite.png', { x: 0, y: 0, width: 100, height: 200, anchor: 'top/left' });
Parameters
Name | Types | Description |
---|---|---|
source | Object |
String |
options | Object |
Options to create the image with. |
options.anchor | String |
Position to anchor the image. Default: "top/left"
|
options.callback | Function |
Function called for every frame of a sprite animation. Default: function (frame) { }; |
options.frames | Array |
Array of frame numbers (integers starting at 0) for sprite animation. Default: [0] |
options.height | Integer |
Height of the image. Default: 0 |
options.loop | Boolean |
Determines if the animation should loop. Default: true |
options.offsetX | Integer |
Starting X coordinate within the image. Default: 0 |
options.offsetY | Integer |
Starting Y coordinate within the image. Default: 0 |
options.rotate | Integer |
Degrees to rotate the image. Default: 0 |
options.scale | Integer |
A float representing the scale of an image. Default: 1 |
options.speed | Integer |
Speed of sprite animation. Default: 120 |
options.tileX | Integer |
Number of times to tile the image horizontally. Default: 1 |
options.tileY | Integer |
Number of times to tile the image vertically. Default: 1 |
options.width | Integer |
Width of the image. Default: 0 |
options.x | Integer |
X coordinate to position an image. Default: 0 |
options.y | Integer |
Y coordinate to position an image. Default: 0 |
Returns
Object
New Facade.Image object.
# Facade.Image._configOptions(options)
private method
Custom configuration for options specific to a image entity.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Complete set of image specific options. |
Returns
Object
Converted options.
# Facade.Image._draw(facade, options, metrics)
private method
Renders an image entity to a canvas.
Parameters
Name | Types | Description |
---|---|---|
facade | Object |
Facade.js object. |
options | Object |
Options used to render the image. |
metrics | Object |
Metrics used to render the image. |
Returns
Void
# Facade.Image._setMetrics(updated)
private method
Set metrics based on the image's options.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
Custom options used to render the image. |
Returns
Object
Object with metrics as key-value pairs.
# Facade.Image.load(source)
Loads either a reference to an image tag or an image URL into a Facade.Image entity.
Parameters
Name | Types | Description |
---|---|---|
source | Object |
String |
Returns
Void
# Facade.Image.reset()
Resets an image sprite animation to the first frame.
Returns
Object
Facade.js image object.
# Facade.Image.stop()
Stops and resets an image sprite animation.
Returns
Object
Facade.js image object.
# Facade.Line(options, options.anchor, options.lineCap, options.lineWidth, options.opacity, options.rotate, options.scale, options.strokeStyle, options.x1, options.x2, options.x, options.y1, options.y2, options.y)
Create a line object. Inherits all methods from Facade.Polygon. var line = new Facade.Line({ x: 0, y: 0, x1: 0, x2: 200, lineWidth: 10, strokeStyle: '#333E4B', anchor: 'top/left' });
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Options to create the line with. |
options.anchor | String |
Position to anchor the line. Default: "top/left"
|
options.lineCap | String |
The style of line cap. Default: "butt"
|
options.lineWidth | Integer |
Width of the stroke. Default: 0 |
options.opacity | Integer |
Opacity of the line. Integer between 0 and 100. Default: 100 |
options.rotate | Integer |
Degrees to rotate the line. Default: 0 |
options.scale | Integer |
A float representing the scale of a line. Default: 1 |
options.strokeStyle | String |
Color of a line. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.x1 | Integer |
X coordinate where line begins. Default: 0 |
options.x2 | Integer |
X coordinate where line ends. Default: 0 |
options.x | Integer |
X coordinate to position the line. Default: 0 |
options.y1 | Integer |
Y coordinate where line begins. Default: 0 |
options.y2 | Integer |
Y coordinate where line ends. Default: 0 |
options.y | Integer |
Y coordinate to position the line. Default: 0 |
Returns
Object
New Facade.Line object.
# Facade.Line._configOptions(options)
private method
Custom configuration for options specific to a line entity.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Complete set of line specific options. |
Returns
Object
Converted options.
# Facade.Line._getAnchorPoint(options, metrics)
private method
Returns an array of the x and y anchor positions based on given options and metrics.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Facade.Line options. |
metrics | Object |
Facade.Line metrics. |
Returns
Array
Array with the x and y anchor positions.
# Facade.Polygon(options, options.anchor, options.closePath, options.fillStyle, options.lineCap, options.lineJoin, options.lineWidth, options.opacity, options.points, options.rotate, options.scale, options.strokeStyle, options.x, options.y)
Create a polygon object. Inherits all methods from Facade.Entity. var polygon = new Facade.Polygon({ x: 0, y: 0, points: [ [100, 0], [200, 100], [100, 200], [0, 100] ], lineWidth: 10, strokeStyle: '#333E4B', fillStyle: '#1C73A8', anchor: 'top/left' });
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Options to create the polygon with. |
options.anchor | String |
Position to anchor the polygon. Default: "top/left"
|
options.closePath | Boolean |
Boolean to determine if the polygon should be self closing or not. Default: true |
options.fillStyle | String |
Fill color for the polygon. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.lineCap | String |
The style of line cap. Default: "butt"
|
options.lineJoin | String |
The style of line join. Default: "miter"
|
options.lineWidth | Integer |
Width of the stroke. Default: 0 |
options.opacity | Integer |
Opacity of the polygon. Integer between 0 and 100. Default: 100 |
options.points | Array |
Multi-dimensional array of points used to render a polygon. Point arrays with 2 values is rendered as a line, 5 values is rendered as an arc and 6 values is rendered as a bezier curve. |
options.rotate | Integer |
Degrees to rotate the polygon. Default: 0 |
options.scale | Integer |
A float representing the scale of a polygon. Default: 1 |
options.strokeStyle | String |
Color of a polygon's stroke. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.x | Integer |
X coordinate to position the polygon. Default: 0 |
options.y | Integer |
Y coordinate to position the polygon. Default: 0 |
Returns
Object
New Facade.Polygon object.
# Facade.Polygon._configOptions(options)
private method
Custom configuration for options specific to a polygon entity.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Complete set of polygon specific options. |
Returns
Object
Converted options.
# Facade.Polygon._defaultOptions(updated)
private method
Returns a default set of options common to all Facade.js polygon entities.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
Additional options as key-value pairs. |
Returns
Object
Default set of options.
# Facade.Polygon._draw(facade, options, metrics)
private method
Renders a polygon entity to a canvas.
Parameters
Name | Types | Description |
---|---|---|
facade | Object |
Facade.js object. |
options | Object |
Options used to render the polygon. |
metrics | Object |
Metrics used to render the polygon. |
Returns
Void
# Facade.Polygon._setMetrics(updated)
private method
Set metrics based on the polygon's options.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
Custom options used to render the polygon. |
Returns
Object
Object with metrics as key-value pairs.
# Facade.Rect(options, options.anchor, options.fillStyle, options.height, options.lineJoin, options.lineWidth, options.opacity, options.rotate, options.scale, options.strokeStyle, options.width, options.x, options.y)
Create a rectangle object. Inherits all methods from Facade.Polygon. var rect = new Facade.Rect({ x: 0, y: 0, width: 200, height: 200, lineWidth: 10, strokeStyle: '#333E4B', fillStyle: '#1C73A8', anchor: 'top/left' });
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Options to create the rectangle with. |
options.anchor | String |
Position to anchor the rectangle. Default: "top/left"
|
options.fillStyle | String |
Fill color for the rectangle. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.height | Integer |
Height of the rectangle. Default: 0 |
options.lineJoin | String |
The style of rectangle join. Default: "miter"
|
options.lineWidth | Integer |
Width of the stroke. Default: 0 |
options.opacity | Integer |
Opacity of the rectangle. Integer between 0 and 100. Default: 100 |
options.rotate | Integer |
Degrees to rotate the rectangle. Default: 0 |
options.scale | Integer |
A float representing the scale of a rectangle. Default: 1 |
options.strokeStyle | String |
Color of a rectangle's stroke. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.width | Integer |
Width of the rectangle. Default: 0 |
options.x | Integer |
X coordinate to position the rectangle. Default: 0 |
options.y | Integer |
Y coordinate to position the rectangle. Default: 0 |
Returns
Object
New Facade.Rect object.
# Facade.Rect._configOptions(options)
private method
Custom configuration for options specific to a rectangle entity.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Complete set of rectangle specific options. |
Returns
Object
Converted options.
# Facade.renderWithContext(options, callback)
Applies key-value pairs to appropriate CanvasRenderingContext2D properties and methods.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Object containing context property and/or method names with corresponding values. |
callback | Function |
Function to be called when context options have been rendered to the canvas. |
Returns
Void
# Facade.resizeForHDPI(ratio)
Resizes the canvas width and height to be multiplied by the pixel ratio of the device to allow for sub-pixel aliasing. Canvas tag maintains original width and height through CSS. Must be called before creating/adding any Facade entities as scaling is applied to the canvas context.
Parameters
Name | Types | Description |
---|---|---|
ratio | Integer |
Ratio to scale the canvas. |
Returns
Object
Facade.js object.
# Facade.Text(value, options, options.anchor, options.fillStyle, options.fontFamily, options.fontSize, options.fontStyle, options.lineHeight, options.lineWidth, options.opacity, options.rotate, options.scale, options.strokeStyle, options.textAlignment, options.textBaseline, options.width, options.x, options.y)
Create a text object. Inherits all methods from Facade.Entity. var text = new Facade.Text('Hello World!', { x: 0, y: 0, fontFamily: 'Helvetica', fontSize: 40, fillStyle: '#333', anchor: 'top/left' });
Parameters
Name | Types | Description |
---|---|---|
value | Object |
Value of the text object. |
options | Object |
Options to create the text entity with. |
options.anchor | String |
Position to anchor the text object. Default: "top/left"
|
options.fillStyle | String |
Fill color for the text object. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.fontFamily | String |
Sets the font family of the text. Only one font can be specified at a time. Default: "Arial" |
options.fontSize | Integer |
Font size in pixels. Default: 30 |
options.fontStyle | String |
Font style of the text. Default: "normal"
|
options.lineHeight | String |
Line height of the text. Default: 1 |
options.lineWidth | Integer |
Width of the stroke. Default: 0 |
options.opacity | Integer |
Opacity of the text object. Integer between 0 and 100. Default: 100 |
options.rotate | Integer |
Degrees to rotate the text object. Default: 0 |
options.scale | Integer |
A float representing the scale of a text object. Default: 1 |
options.strokeStyle | String |
Color of a text object's stroke. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000"
|
options.textAlignment | String |
Horizontal alignment of the text. Default: "left"
|
options.textBaseline | String |
Baseline to set the vertical alignment of the text drawn. Default: "top"
|
options.width | Integer |
Max width of the text object. Will cause text to wrap onto a new line if necessary. No wrapping will occur if the value is set to 0. Default: 0 |
options.x | Integer |
X coordinate to position a text object. Default: 0 |
options.y | Integer |
Y coordinate to position a text object. Default: 0 |
Returns
Object
New Facade.Text object.
# Facade.Text._configOptions(options)
private method
Custom configuration for options specific to a text entity.
Parameters
Name | Types | Description |
---|---|---|
options | Object |
Complete set of text specific options. |
Returns
Object
Converted options.
# Facade.Text._draw(facade, options, metrics)
private method
Renders a text entity to a canvas.
Parameters
Name | Types | Description |
---|---|---|
facade | Object |
Facade.js object. |
options | Object |
Options used to render the text entity. |
metrics | Object |
Metrics used to render the text entity. |
Returns
Void
# Facade.Text._setMetrics(updated)
private method
Set metrics based on the text's options.
Parameters
Name | Types | Description |
---|---|---|
updated | Object |
Custom options used to render the text entity. |
Returns
Object
Object with metrics as key-value pairs.
# Facade.Text.setText(value)
Sets the text entities value.
Parameters
Name | Types | Description |
---|---|---|
value | String |
The new value of the text entity. |
Returns
Array
An array of lines and the position to render using fillText() and strokeText().
# Facade.width(width)
Gets and sets the canvas width.
Parameters
Name | Types | Description |
---|---|---|
width | Integer |
Width in pixels. |
Returns
Integer
Width in pixels.