facade.js (master) - Drawing shapes, images and text in HTML5 canvas made easy.

# 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" top/left top/center top/right center/left center center/right bottom/left bottom/center bottom/right
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" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
options.lineCap	`String`	The style of line cap. Default: "butt" butt round square
options.lineJoin	`String`	The style of line join. Default: "miter" miter round bevel
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" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
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.clear()

Clears the canvas.

Returns

Object

Facade.js object.

# 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" top/left top/center top/right center/left center center/right bottom/left bottom/center bottom/right
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" top/left top/center top/right center/left center center/right bottom/left bottom/center bottom/right
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.pause()

Pauses an image sprite animation.

Returns

Object

Facade.js image object.

# Facade.Image.play()

Starts an image sprite animation.

Returns

Object

Facade.js image object.

# 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" top/left top/center top/right center/left center center/right bottom/left bottom/center bottom/right
options.lineCap	`String`	The style of line cap. Default: "butt" butt round square
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" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
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" top/left top/center top/right center/left center center/right bottom/left bottom/center bottom/right
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" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
options.lineCap	`String`	The style of line cap. Default: "butt" butt round square
options.lineJoin	`String`	The style of line join. Default: "miter" miter round bevel
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" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
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" top/left top/center top/right center/left center center/right bottom/left bottom/center bottom/right
options.fillStyle	`String`	Fill color for the rectangle. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
options.height	`Integer`	Height of the rectangle. Default: 0
options.lineJoin	`String`	The style of rectangle join. Default: "miter" miter round bevel
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" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
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.start()

Starts the callback supplied in Facade.draw.

Returns

Object

Facade.js object.

# Facade.stop()

Stops the callback supplied in Facade.draw.

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" top/left top/center top/right center/left center center/right bottom/left bottom/center bottom/right
options.fillStyle	`String`	Fill color for the text object. Can be a text representation of a color, HEX, RGB(a), HSL(a). Default: "#000" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
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" normal bold italic
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" HTML Colors: red, green, blue, etc. HEX: #f00, #ff0000 RGB(a): rgb(255, 0, 0), rgba(0, 255, 0, 0.5) HSL(a): hsl(100, 100%, 50%), hsla(100, 100%, 50%, 0.5)
options.textAlignment	`String`	Horizontal alignment of the text. Default: "left" left center right
options.textBaseline	`String`	Baseline to set the vertical alignment of the text drawn. Default: "top" top hanging middle alphabetic ideographic bottom
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.