← View all versions of documentation

isArray() private

Checks an object to see if it is a JavaScript array. Returns a boolean result.

Parameters

obj Object

The object to be checked.

Examples

console.log(isArray([1, 2, 3, 4, 5])); // true
console.log(isArray({ x: 0, y: 0, width: 100, height: 100 })); // false

Code

function isArray(obj) {

	return Object.prototype.toString.call(obj) === '[object Array]' ? true : false;

}

Returns

Boolean Result of the test.

Facade()

Creates a new Facade.js object with either a preexisting canvas tag or a unique name, width, and height.

Parameters

canvas Object|String Optional

Reference to an HTML canvas element or a unique name.

width Integer Optional

Width of the canvas.

height Integer Optional

Height of the canvas.

Properties

canvas Object

Reference to the canvas element.

context Object

Reference to the CanvasRenderingContext2D object.

dt Integer

Current time in milliseconds since last canvas draw.

fps Integer

Current frames per second.

ftime Integer

Time of last canvas draw.

Examples

var stage = new Facade(document.getElementById('stage'));
var stage = new Facade('stage', 500, 300);

Code

function Facade(canvas, width, height) {

	if (!(this instanceof Facade)) {

		return new Facade(canvas, width, height);

	}

	if (canvas && typeof canvas === 'object' && canvas.nodeType === 1) {

		this.canvas = canvas;

	} else {

		this.canvas = document.createElement('canvas');

		if (typeof canvas === 'string') {

			this.canvas.setAttribute('id', canvas);

		}

	}

	if (width && height) {

		this.canvas.setAttribute('width', parseInt(width, 10));
		this.canvas.setAttribute('height', parseInt(height, 10));

	}

	try {

		this.context = this.canvas.getContext('2d');

	} catch (e) {

		throw new Error('Parameter passed to Facade.js is not a valid canvas element');

	}

	this.dt = 0;
	this.fps = 0;
	this.ftime = null;

	this._callback = null;

	this._requestAnimation = null;

}

Returns

Object New Facade.js object.

Facade.addToStage()

Draws a Facade.js object to the stage. Allows for temporary options to be use while drawing an object.

Parameters

obj Object

Facade.js entity object.

options Object Optional

Temperary options.

Examples

stage.addToStage(circle);
stage.addToStage(circle, { scale: 2 });

Code

Facade.prototype.addToStage = function (obj, options) {

	var metrics;

	if (!(obj instanceof Facade.Entity)) {

		throw new Error('Parameter passed to Facade.addToStage is not a valid Facade.js entity object');

	}

	if (options) {

		options = obj.setOptions(options, true);
		metrics = obj._setMetrics(options, true);

	} else {

		options = obj.getAllOptions();
		metrics = obj.getAllMetrics();

	}

	if (obj.isVisible(this, metrics)) {

		this.context.save();

		obj._draw.call(obj, this, options, metrics);

		this.context.restore();

	}

	return this;

};

Returns

Object Facade.js object.

Facade._animate() private

Method called by requestAnimationFrame. Sets Facade.dt and Facade.fps.

Parameters

time Integer

DOMTimeStamp or DOMHighResTimeStamp (Google Chrome Only)

Examples

this._requestAnimation = _requestAnimationFrame(this._animate.bind(this));

Code

Facade.prototype._animate = function (time) {

	if (typeof this._callback === 'function') {

		if (this.ftime) {

			this.dt = time - this.ftime;

			this.fps = (1000 / this.dt).toFixed(2);

		}

		this._requestAnimation = _requestAnimationFrame(this._animate.bind(this));

		this.ftime = time;

		this.context.save();

		this._callback.call(this);

		this.context.restore();

	} else {

		this.stop();

	}

	return this;

};

Returns

Object Facade.js object.

Facade.clear()

Clears the canvas.

Examples

stage.clear();

Code

Facade.prototype.clear = function () {

	this.context.clearRect(0, 0, this.width(), this.height());

	return this;

};

Returns

Object Facade.js object.

Facade.draw()

Sets a callback function to run in a loop using requestAnimationFrame.

Parameters

callback Function

Function callback.

Examples

stage.draw(function () {

    this.clear();

    this.addToStage(circle, { x: 100, y: 100 });

});

Code

Facade.prototype.draw = function (callback) {

	if (typeof callback === 'function') {

		this._callback = callback;

		this.start();

	} else {

		throw new Error('Parameter passed to Facade.draw is not a valid function');

	}

	return this;

};

Returns

Object Facade.js object.

Facade.exportBase64()

Exports a base64 encoded representation of the current rendered canvas.

Parameters

type String Optional

Image format: image/png (Default), image/jpeg, image/webp (Google Chrome Only)

quality Integer Optional

Number between 0 and 100.

Examples

console.log(stage.exportBase64('image/png', 100));

Code

Facade.prototype.exportBase64 = function (type, quality) {

	if (!type) {

		type = 'image/png';

	}

	if (typeof quality === 'number') {

		quality = quality / 100;

	} else {

		quality = 1;

	}

	return this.canvas.toDataURL(type, quality);

};

Returns

String Base64 encoded string.

Facade.height()

Gets and sets the canvas height.

Parameters

height Integer Optional

Height in pixels.

Examples

console.log(stage.height()); // 300
console.log(stage.height(600)); // 600

Code

Facade.prototype.height = function (height) {

	if (height) {

		this.canvas.setAttribute('height', parseInt(height, 10));

	}

	return this.canvas.height;

};

Returns

Integer Height in pixels.

Facade.start()

Starts the callback supplied in Facade.draw.

Examples

stage.start();

Code

Facade.prototype.start = function () {

	this._requestAnimation = _requestAnimationFrame(this._animate.bind(this));

	return this;

};

Returns

Object Facade.js object.

Facade.stop()

Stops the callback supplied in Facade.draw.

Examples

stage.stop();

Code

Facade.prototype.stop = function () {

	this.dt = 0;
	this.fps = 0;
	this.ftime = null;

	this._requestAnimation = _cancelAnimationFrame(this._requestAnimation);

	return this;

};

Returns

Object Facade.js object.

Facade.width()

Gets and sets the canvas width.

Parameters

width Integer Optional

Width in pixels.

Examples

console.log(stage.width()); // 400
console.log(stage.width(800)); // 800

Code

Facade.prototype.width = function (width) {

	if (width) {

		this.canvas.setAttribute('width', parseInt(width, 10));

	}

	return this.canvas.width;

};

Returns

Integer Width in pixels.

Facade.Entity() private

The constructor for all Facade.js shapes, images and text objects.

Code

Facade.Entity = function () { };

Returns

False

Facade.Entity._defaultOptions() private

Returns a default set of options common to all Facade.js entities.

Examples

console.log(Facade.Entity.prototype._defaultOptions());

Code

Facade.Entity.prototype._defaultOptions = function () {

	return {
		x: 0,
		y: 0,
		shadowBlur: 0,
		shadowColor: '#000',
		shadowOffsetX: 0,
		shadowOffsetY: 0,
		anchor: 'top/left',
		opacity: 100,
		flip: '',
		rotate: 0,
		scale: 1
	};

};

Returns

Object Default set of options.

Facade.Entity._defaultMetrics() private

Returns a default set of metrics common to all Facade.js entities.

Examples

console.log(Facade.Entity.prototype._defaultMetrics());

Code

Facade.Entity.prototype._defaultMetrics = function () {

	return {
		x: null,
		y: null,
		width: null,
		height: null
	};

};

Returns

Object Default set of metrics.

Facade.Entity._setContext() private

Sets options for a given CanvasRenderingContext2D object based on passed options and metrics.

Parameters

context Object

A CanvasRenderingContext2D object.

options Object

An options object based on Facade.Entity._defaultOptions() and the extended key/value pairs through the custom options.

metrics Object

A metrics object based on Facade.Entity._defaultMetrics() and the extended key/value pairs through the custom metrics.

Examples

this._setContext(context, options, metrics);

Code

Facade.Entity.prototype._setContext = function (context, options, metrics) {

	var rotate = this._getRotatePoint(options, metrics),
		flip_horizontal = options.flip.match(/horizontal/),
		flip_vertical = options.flip.match(/vertical/);

	context.translate(metrics.x, metrics.y);

	if (options.rotate) {

		context.translate(rotate[0], rotate[1]);
		context.rotate(options.rotate * Math.PI / 180);
		context.translate(-rotate[0], -rotate[1]);

	}

	if (flip_horizontal) {
		context.translate(metrics.width, 0);
	}

	if (flip_vertical) {
		context.translate(0, metrics.height);
	}

	context.scale(options.scale, options.scale);

	if (flip_horizontal) {
		context.scale(-1, 1);
	}

	if (flip_vertical) {
		context.scale(1, -1);
	}

	context.globalAlpha = options.opacity / 100;

	if (options.fillStyle) {
		context.fillStyle = options.fillStyle;
	}

	if (options.lineCap) {
		context.lineCap = options.lineCap;
	}

	if (options.lineWidth) {
		context.lineWidth = options.lineWidth;
		context.strokeStyle = options.strokeStyle;
	}

	if (options.shadowBlur) {
		context.shadowBlur = options.shadowBlur;
		context.shadowColor = options.shadowColor;
		context.shadowOffsetX = options.shadowOffsetX;
		context.shadowOffsetY = options.shadowOffsetY;
	}

	if (options.fontStyle) {
		context.font = options.fontStyle + ' ' + options.fontSize + 'px ' + options.fontFamily;
		context.textBaseline = options.textBaseline;
	}

};

Returns

void

Facade.Entity.getOption()

Retrives the value of a given option. Only retrieves options set when creating a new Facade.js entity object or setOptions not through temperary options set through Facade.addToStage.

Parameters

key String

The name of the option.

Examples

console.log(text.getOption('value'));

Code

Facade.Entity.prototype.getOption = function (key) {

	if (this._options.hasOwnProperty(key)) {

		return this._options[key];

	}

	return undefined;

};

Returns

Object Value of the option requested.

Facade.Entity.getAllOptions()

Retrives the value of all options. Only retrieves options set when creating a new Facade.js entity object or setOptions not through temperary options set through Facade.addToStage.

Examples

console.log(text.getAllOptions());

Code

Facade.Entity.prototype.getAllOptions = function () {

	var options = {},
		key;

	for (key in this._options) {

		if (this._options.hasOwnProperty(key)) {

			options[key] = this._options[key];

		}

	}

	return options;

};

Returns

Object Object containing all options.

Facade.Entity.setOptions()

Sets all options for a given object.

Parameters

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 saved or not.

Examples

console.log(text.setOptions({ value: 'Hello world!', fontFamily: 'Georgia' }));

Code

Facade.Entity.prototype.setOptions = function (updated, test) {

	var options = {},
		key;

	for (key in this._options) {

		if (this._options.hasOwnProperty(key)) {

			if (updated && updated.hasOwnProperty(key)) {

				if (typeof this._options[key] === typeof updated[key]) {

					options[key] = updated[key];

					if (test !== true) {

						this._options[key] = updated[key];

					}

				} else {

					throw new Error('The value for ' + key + ' was a ' + typeof updated[key] + ' not a ' + typeof this._options[key]);

				}

			} else {

				options[key] = this._options[key];

			}

		}

	}

	if (test !== true) {

		this._setMetrics(options, test);

	}

	return options;

};

Returns

Object Updated options.

Facade.Entity.getMetric()

Retrives the value of a given metric. Only retrieves metrics set when creating a new Facade.js entity object or setOptions not through temperary options set through Facade.addToStage.

Parameters

key String

The name of the metric.

Examples

console.log(text.getMetric('width'));

Code

Facade.Entity.prototype.getMetric = function (key) {

	if (this._metrics.hasOwnProperty(key)) {

		return this._metrics[key];

	}

	return undefined;

};

Returns

Integer Value of the metric requested.

Facade.Entity.getAllMetrics()

Retrives the value of all metrics. Only retrieves metrics set when creating a new Facade.js entity object or setOptions not through temperary options set through Facade.addToStage.

Examples

console.log(text.getAllMetrics());

Code

Facade.Entity.prototype.getAllMetrics = function () {

	var metrics = {},
		key;

	for (key in this._metrics) {

		if (this._metrics.hasOwnProperty(key)) {

			metrics[key] = this._metrics[key];

		}

	}

	return metrics;

};

Returns

Object Object containing all metrics.

Facade.Entity.isVisible()

Method used to test if an object is visible on a given canvas. Optional metrics parameter used to test an object with different metrics.

Parameters

canvas Object

Facade.js object or canvas element.

metrics Object Optional

Optional test metrics.

Examples

console.log(box.isVisible(stage.canvas));
console.log(box.isVisible(stage.canvas, { x: 200, y: 200, width: 100, height: 100 }));

Code

Facade.Entity.prototype.isVisible = function (canvas, metrics) {

	if (canvas instanceof Facade) {

		canvas = canvas.canvas;

	}

	if (canvas && typeof canvas === 'object' && canvas.nodeType === 1) {

		if (typeof metrics === 'undefined') {

			metrics = this._metrics;

		}

		if (metrics.x < canvas.width && metrics.x + metrics.width > 0 && metrics.y < canvas.height && metrics.y + metrics.height > 0) {

			return true;

		}

	} else {

		throw new Error('Parameter passed to Facade.Entity.isVisible is not a valid canvas element');

	}

	return false;

};

Returns

Boolean Result of the test.

Facade.Entity._getAnchorPoint() private

Gets the anchor point to draw an object at.

Parameters

options Object

Facade.js object options.

metrics Object

Facade.js object metrics.

Examples

var anchor = this._getAnchorPoint(options, metrics);

Code

Facade.Entity.prototype._getAnchorPoint = function (options, metrics) {

	var x = options.x,
		y = options.y;

	if (options.anchor.match(/^center/)) {

		y = options.y - (metrics.height / 2);

	} else if (options.anchor.match(/^bottom/)) {

		y = options.y - metrics.height;

	}

	if (options.anchor.match(/center$/)) {

		x = options.x - (metrics.width / 2);

	} else if (options.anchor.match(/right$/)) {

		x = options.x - metrics.width;

	}

	return [ x, y ];

};

Returns

Object Array with x and y coordinates.

Facade.Entity._getRotatePoint() private

Gets the anchor point to rotate an object at.

Parameters

options Object

Facade.js object options.

metrics Object

Facade.js object metrics.

Examples

var rotate = this._getRotatePoint(options, metrics);

Code

Facade.Entity.prototype._getRotatePoint = function (options, metrics) {

	var x = 0,
		y = 0;

	if (options.anchor.match(/^center/)) {

		y = metrics.height / 2;

	} else if (options.anchor.match(/^bottom/)) {

		y = metrics.height;

	}

	if (options.anchor.match(/center$/)) {

		x = metrics.width / 2;

	} else if (options.anchor.match(/right$/)) {

		x = metrics.width;

	}

	return [ x, y ];

};

Returns

Object Array with x and y coordinates.

Facade.Circle()

Create a circle object. Inherits all methods from Facade.Entity.

Parameters

options Object Optional

Options to create the circle with.

Options

x Integer Optional

X coordinate to begin drawing an object. Default: 0

y Integer Optional

Y coordinate to begin drawing an object. Default: 0

shadowBlur Integer Optional

Blur level for drop shadow. Default: 0

shadowColor String Optional

Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"

  • red
  • #F00
  • rgb(255, 0, 0);
  • rgba(255, 0, 0, 1);

shadowOffsetX Integer Optional

X offset of drop shadow. Default: 0

shadowOffsetY Integer Optional

Y offset of drop shadow. Default: 0

anchor String Optional

Position to anchor the object. Default: "top/left"

  • center
  • center/right
  • bottom/right
  • bottom/center
  • bottom/left
  • center/left
  • top/left
  • top/center
  • top/right

opacity Integer Optional

Opacity of the object. Integer between 0 and 100. Default: 100

flip String Optional

Direction to flip the object. Can be either one or both of the following options. Delimited by a /. Default: ""

  • horizontal
  • vertical

rotate Integer Optional

Degrees to rotate the object. Default: 0

scale Integer Optional

Scaling of the object. A float starting at 1. Default: 1

radius Integer Optional

Radius of the circle. Default: 10

start Integer Optional

Degree at which the circle begins. Default: 0

end Integer Optional

Degree at which the circle ends. Default: 360

counterclockwise Boolean Optional

Determines if the circle will be drawn in a counter clockwise direction. Default: false

fillStyle String Optional

Fill color for the object. Default: "#000"

strokeStyle String Optional

Color of an object's stroke. Default: "#000"

strokePosition String Optional

Position to draw the stroke. Default: "default"

lineWidth Integer Optional

Width of the stroke. Default: 0

lineCap String Optional

The style of line cap (end of line). Default: "butt"

  • butt
  • round
  • square

Examples

var circle = new Facade.Circle({ x: 250, y: 250, radius: 50, anchor: 'center' });

Code

Facade.Circle = function (options) {

	if (!(this instanceof Facade.Circle)) {

		return new Facade.Circle(options);

	}

	this._options = this._defaultOptions();
	this._metrics = this._defaultMetrics();

	this._options.radius = 10;
	this._options.start = 0;
	this._options.end = 360;
	this._options.counterclockwise = false;
	this._options.fillStyle = '#000';
	this._options.strokeStyle = '#000';
	this._options.strokePosition = 'default';
	this._options.lineWidth = 0;
	this._options.lineCap = 'butt';

	this.setOptions(options);

};

Returns

Object Reference to the new Facade.js circle object.

Facade.Circle._draw() private

Renders the circle on the specified Facade.js canvas with the custom options and metrics.

Parameters

facade Object

Facade.js object.

options Object

The options to render the circle with.

metrics Object

The metrics to render the circle with.

Examples

circle._draw(stage, circle.getAllOptions(), circle.getAllMetrics());

Code

Facade.Circle.prototype._draw = function (facade, options, metrics) {

	var context = facade.context,
		strokeOffset = 0;

	this._setContext(context, options, metrics);

	context.beginPath();

	context.arc(
		0,
		0,
		options.radius,
		options.start * Math.PI / 180,
		options.end * Math.PI / 180,
		options.counterclockwise
	);

	if (options.fillStyle) {

		context.fill();

	}

	if (options.strokePosition.match(/(in|out)set/)) {

		if (options.strokePosition === 'inset') {

			strokeOffset = -(options.lineWidth / 2);

		} else if (options.strokePosition === 'outset') {

			strokeOffset = (options.lineWidth / 2);

		}

		context.closePath();
		context.beginPath();

		context.arc(
			0,
			0,
			options.radius + strokeOffset,
			options.start * Math.PI / 180,
			options.end * Math.PI / 180,
			options.counterclockwise
		);

	}

	if (options.lineWidth) {

		context.stroke();

	}

	context.closePath();

};

Returns

void

Facade.Circle._setMetrics() private

Sets the metrics of the circle based on supplied options.

Parameters

options Object

Options to set the metrics with.

test Boolean Optional

Flag to determine if metrics are saved or not.

Examples

console.log(circle._setMetrics(circle.getAllOptions()));

Code

Facade.Circle.prototype._setMetrics = function (options, test) {

	var metrics = this.getAllMetrics(),
		anchor,
		strokeWidth = 0;

	if (options.strokePosition === 'default') {

		strokeWidth = options.lineWidth / 2;

	} else if (options.strokePosition === 'outset') {

		strokeWidth = options.lineWidth;

	}

	metrics.width = ((options.radius + strokeWidth) * 2) * options.scale;
	metrics.height = ((options.radius + strokeWidth) * 2) * options.scale;

	anchor = this._getAnchorPoint(options, metrics);

	metrics.x = anchor[0] + ((options.radius + strokeWidth) * options.scale);
	metrics.y = anchor[1] + ((options.radius + strokeWidth) * options.scale);

	if (test !== true) {

		this._metrics = metrics;

	}

	return metrics;

};

Returns

Object Updated metrics.

Facade.Image()

Create an image object. Inherits all methods from Facade.Entity.

Parameters

source Object|String

Local image file or reference to an HTML image tag.

options Object Optional

Options to create the image with.

Properties

image Object

Reference to the image element.

currentFrame Integer

Current frame of sprite animation.

isAnimating Boolean

Boolean state of sprite animation.

Options

x Integer Optional

X coordinate to begin drawing an object. Default: 0

y Integer Optional

Y coordinate to begin drawing an object. Default: 0

shadowBlur Integer Optional

Blur level for drop shadow. Default: 0

shadowColor String Optional

Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"

  • red
  • #F00
  • rgb(255, 0, 0);
  • rgba(255, 0, 0, 1);

shadowOffsetX Integer Optional

X offset of drop shadow. Default: 0

shadowOffsetY Integer Optional

Y offset of drop shadow. Default: 0

anchor String Optional

Position to anchor the object. Default: "top/left"

  • center
  • center/right
  • bottom/right
  • bottom/center
  • bottom/left
  • center/left
  • top/left
  • top/center
  • top/right

opacity Integer Optional

Opacity of the object. Integer between 0 and 100. Default: 100

flip String Optional

Direction to flip the object. Can be either one or both of the following options. Delimited by a /. Default: ""

  • horizontal
  • vertical

rotate Integer Optional

Degrees to rotate the object. Default: 0

scale Integer Optional

Scaling of the object. A float starting at 1. Default: 1

width Integer Optional

Width of the object. Default: 0

height Integer Optional

Height of the object. Default: 0

offsetX Integer Optional

X coordinate within the image where rendering begins. Default: 0

offsetY Integer Optional

Y coordinate within the image where rendering begins. Default: 0

tileX Integer Optional

Number of times to tile the image horizontally. Default: 1

tileY Integer Optional

Number of times to tile the image vertically. Default: 1

frames Array Optional

Array of frames for sprite animation. Default: []

speed Integer Optional

Speed of sprite animation. Default: 120

loop Boolean Optional

Determines if the animation should loop. Default: true

callback Function Optional

Function called for every frame of a sprite animation. Default: `function (frame) { };`

Examples

var image = new Facade.Image('images/player.png', { width: 50, height: 90, anchor: 'bottom/center' });

Code

Facade.Image = function (source, options) {

	if (typeof source === 'undefined') {

		throw new Error('Required parameter "source" missing from Facade.Image call');

	}

	if (!(this instanceof Facade.Image)) {

		return new Facade.Image(source, options);

	}

	this._options = this._defaultOptions();
	this._metrics = this._defaultMetrics();

	this._options.width = 0;
	this._options.height = 0;
	this._options.offsetX = 0;
	this._options.offsetY = 0;
	this._options.tileX = 1;
	this._options.tileY = 1;
	this._options.frames = [];
	this._options.speed = 120;
	this._options.loop = true;
	this._options.callback = function (frame) { };

	this.image = this.load(source);

	this.currentFrame = 0;

	this.isAnimating = false;

	this.setOptions(options);

};

Returns

Object Reference to the new Facade.js image object.

Facade.Image.play()

Starts an image sprite animation.

Examples

image.play();

Code

Facade.Image.prototype.play = function () {

	this.isAnimating = true;

	return this;

};

Returns

Object Facade.js image object.

Facade.Image.pause()

Pauses an image sprite animation.

Examples

image.pause();

Code

Facade.Image.prototype.pause = function () {

	this.isAnimating = false;

	return this;

};

Returns

Object Facade.js image object.

Facade.Image.reset()

Resets an image sprite animation.

Examples

image.reset();

Code

Facade.Image.prototype.reset = function () {

	this.currentFrame = 0;

	return this;

};

Returns

Object Facade.js image object.

Facade.Image.stop()

Stops and resets an image sprite animation.

Examples

image.stop();

Code

Facade.Image.prototype.stop = function () {

	this.currentFrame = 0;

	this.isAnimating = false;

	return this;

};

Returns

Object Facade.js image object.

Facade.Image.load()

Loads an image into a Facade.js image object.

Parameters

source Object|String

Local image file or reference to an HTML image element.

Examples

image.load('image/tiles.png');
image.load(document.getElementById('avatar'));

Code

Facade.Image.prototype.load = function (source) {

	var image;

	if (typeof source === 'object' && source.nodeType === 1) {

		image = source;

		if (image.complete) {

			this._setMetrics.call(this, this._options);

		} else {

			image.addEventListener('load', this._setMetrics.bind(this, this._options));

		}

	} else {

		image = document.createElement('img');
		image.setAttribute('src', source);
		image.addEventListener('load', this._setMetrics.bind(this, this._options));

	}

	return image;

};

Returns

Object Reference to the HTML image element.

Facade.Image._draw() private

Renders the image on the specified Facade.js canvas with the custom options and metrics.

Parameters

facade Object

Facade.js object.

options Object

The options to render the image with.

metrics Object

The metrics to render the image with.

Examples

image._draw(stage, image.getAllOptions(), image.getAllMetrics());

Code

Facade.Image.prototype._draw = function (facade, options, metrics) {

	var context = facade.context,
		currentOffsetX = 0,
		x = 0,
		y = 0;

	if (this.image.complete) {

		this._setContext(context, options, metrics);

		if (options.frames.length) {

			currentOffsetX = options.frames[this.currentFrame] || 0;

		}

		for (x = 0; x < options.tileX; x += 1) {

			for (y = 0; y < options.tileY; y += 1) {

				context.drawImage(
					this.image,
					(options.width * currentOffsetX) + options.offsetX,
					options.offsetY,
					options.width,
					options.height,
					options.width * x,
					options.height * y,
					options.width,
					options.height
				);

			}

		}

		if (this.isAnimating && options.frames.length) {

			if (!this.ftime) {

				this.ftime = facade.ftime;

				if (typeof options.callback === 'function') {

					options.callback.call(this, options.frames[this.currentFrame]);

				}

			}

			if (facade.ftime - this.ftime >= options.speed) {

				this.ftime = facade.ftime;

				this.currentFrame += 1;

				if (this.currentFrame >= options.frames.length) {

					if (options.loop) {

						this.currentFrame = 0;

					} else {

						this.currentFrame = options.frames.length - 1;

						this.isAnimating = false;

					}

				}

				if (typeof options.callback === 'function') {

					options.callback.call(this, options.frames[this.currentFrame]);

				}

			}

		}

	}

};

Returns

void

Facade.Image._setMetrics() private

Sets the metrics of the image based on supplied options.

Parameters

options Object

Options to set the metrics with.

test Boolean

Flag to determine if metrics are saved or not.

Examples

console.log(image._setMetrics(image.getAllOptions()));

Code

Facade.Image.prototype._setMetrics = function (options, test) {

	var metrics = this.getAllMetrics(),
		anchor;

	if (this.image.complete) {

		options.width = options.width || this.image.width;
		options.height = options.height || this.image.height;

		metrics.width = (options.width * options.tileX) * options.scale;
		metrics.height = (options.height * options.tileY) * options.scale;

		anchor = this._getAnchorPoint(options, metrics);

		metrics.x = anchor[0];
		metrics.y = anchor[1];

		if (test !== true) {

			this._metrics = metrics;

		}

		return metrics;

	}

};

Returns

Object Updated metrics.

Facade.Line()

Create a line object. Inherits all methods from Facade.Entity.

Parameters

options Object

Options to create the line with.

Options

x Integer Optional

X coordinate to begin drawing an object. Default: 0

y Integer Optional

Y coordinate to begin drawing an object. Default: 0

shadowBlur Integer Optional

Blur level for drop shadow. Default: 0

shadowColor String Optional

Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"

  • red
  • #F00
  • rgb(255, 0, 0);
  • rgba(255, 0, 0, 1);

shadowOffsetX Integer Optional

X offset of drop shadow. Default: 0

shadowOffsetY Integer Optional

Y offset of drop shadow. Default: 0

anchor String Optional

Position to anchor the object. Default: "top/left"

  • center
  • center/right
  • bottom/right
  • bottom/center
  • bottom/left
  • center/left
  • top/left
  • top/center
  • top/right

opacity Integer Optional

Opacity of the object. Integer between 0 and 100. Default: 100

flip String Optional

Direction to flip the object. Can be either one or both of the following options. Delimited by a /. Default: ""

  • horizontal
  • vertical

rotate Integer Optional

Degrees to rotate the object. Default: 0

scale Integer Optional

Scaling of the object. A float starting at 1. Default: 1

startX Integer Optional

X coordinate where line starts. Default: 0

startY Integer Optional

Y coordinate where line starts. Default: 0

endX Integer Optional

X coordinate where line ends. Default: 0

endY Integer Optional

Y coordinate where line ends. Default: 0

strokeStyle String Optional

Color of an object's stroke. Default: "#000"

lineWidth Integer Optional

Width of the stroke. Default: 0

lineCap String Optional

The style of line cap (end of line). Default: "butt"

  • butt
  • round
  • square

Examples

var line = new Facade.Line({ x: 250, y: 250, startX: 250, startY: 0, endX: 250, endY: 250, lineWidth: 1, anchor: 'center' });

Code

Facade.Line = function (options) {

	if (!(this instanceof Facade.Line)) {

		return new Facade.Line(options);

	}

	this._options = this._defaultOptions();
	this._metrics = this._defaultMetrics();

	this._options.startX = 0;
	this._options.startY = 0;
	this._options.endX = 0;
	this._options.endY = 0;
	this._options.strokeStyle = '#000';
	this._options.lineWidth = 0;
	this._options.lineCap = 'butt';

	this.setOptions(options);

};

Returns

Object Reference to the new Facade.js line object.

Facade.Line._draw() private

Renders the line on the specified Facade.js canvas with the custom options and metrics.

Parameters

facade Object

Facade.js object.

options Object

The options to render the line with.

metrics Object

The metrics to render the line with.

Examples

line._draw(stage, line.getAllOptions(), line.getAllMetrics());

Code

Facade.Line.prototype._draw = function (facade, options, metrics) {

	var context = facade.context;

	this._setContext(context, options, metrics);

	context.beginPath();

	context.moveTo(0, 0);
	context.lineTo(
		options.endX - options.startX,
		options.endY - options.startY
	);

	context.stroke();

	context.closePath();

};

Returns

void

Facade.Line._setMetrics() private

Sets the metrics of the line based on supplied options.

Parameters

options Object

Options to set the metrics with.

test Boolean Optional

Flag to determine if metrics are saved or not.

Examples

console.log(line._setMetrics(line.getAllOptions()));

Code

Facade.Line.prototype._setMetrics = function (options, test) {

	var metrics = this.getAllMetrics(),
		anchor;

	metrics.width = Math.abs(options.endX - options.startX) * options.scale;
	metrics.height = Math.abs(options.endY - options.startY) * options.scale;

	anchor = this._getAnchorPoint(options, metrics);

	metrics.x = anchor[0];
	metrics.y = anchor[1];

	if (test !== true) {

		this._metrics = metrics;

	}

	return metrics;

};

Returns

Object Updated metrics.

Facade.Rect()

Create a rectangle object. Inherits all methods from Facade.Entity.

Parameters

options Object

Options to create the rectangle with.

Options

x Integer Optional

X coordinate to begin drawing an object. Default: 0

y Integer Optional

Y coordinate to begin drawing an object. Default: 0

shadowBlur Integer Optional

Blur level for drop shadow. Default: 0

shadowColor String Optional

Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"

  • red
  • #F00
  • rgb(255, 0, 0);
  • rgba(255, 0, 0, 1);

shadowOffsetX Integer Optional

X offset of drop shadow. Default: 0

shadowOffsetY Integer Optional

Y offset of drop shadow. Default: 0

anchor String Optional

Position to anchor the object. Default: "top/left"

  • center
  • center/right
  • bottom/right
  • bottom/center
  • bottom/left
  • center/left
  • top/left
  • top/center
  • top/right

opacity Integer Optional

Opacity of the object. Integer between 0 and 100. Default: 100

flip String Optional

Direction to flip the object. Can be either one or both of the following options. Delimited by a /. Default: ""

  • horizontal
  • vertical

rotate Integer Optional

Degrees to rotate the object. Default: 0

scale Integer Optional

Scaling of the object. A float starting at 1. Default: 1

width Integer Optional

Width of the object. Default: 100

height Integer Optional

Height of the object. Default: 100

fillStyle String Optional

Fill color for the object. Default: "#000"

strokeStyle String Optional

Color of an object's stroke. Default: "#000"

strokePosition String Optional

Position to draw the stroke. Default: "default"

lineWidth Integer Optional

Width of the stroke. Default: 0

borderRadius Integer Optional

Radius of the rectangle's corners. Default: 0

Examples

var rect = new Facade.Rect({ width: 100, height: 100, fillStyle: '#f00' });

Code

Facade.Rect = function (options) {

	if (!(this instanceof Facade.Rect)) {

		return new Facade.Rect(options);

	}

	this._options = this._defaultOptions();
	this._metrics = this._defaultMetrics();

	this._options.width = 100;
	this._options.height = 100;
	this._options.fillStyle = '#000';
	this._options.strokeStyle = '#000';
	this._options.strokePosition = 'default';
	this._options.lineWidth = 0;
	this._options.borderRadius = 0;

	this.setOptions(options);

};

Returns

Object Reference to the new Facade.js rectangle object.

Facade.Rect._draw() private

Renders the rectangle on the specified Facade.js canvas with the custom options and metrics.

Parameters

facade Object

Facade.js object.

options Object

The options to render the rectangle with.

metrics Object

The metrics to render the rectangle with.

Examples

rect._draw(stage, rect.getAllOptions(), rect.getAllMetrics());

Code

Facade.Rect.prototype._draw = function (facade, options, metrics) {

	var context = facade.context,
		borderRadius;

	this._setContext(context, options, metrics);

	context.beginPath();

	if (options.borderRadius) {

		borderRadius = Math.min(
			options.borderRadius,
			options.height / 2,
			options.width / 2
		);

		context.moveTo(borderRadius, 0);

		context.arc(
			options.width - borderRadius,
			borderRadius,
			borderRadius,
			Math.PI * 1.5,
			0
		);

		context.arc(
			options.width - borderRadius,
			options.height - borderRadius,
			borderRadius,
			0,
			Math.PI * 0.5
		);

		context.arc(
			borderRadius,
			options.height - borderRadius,
			borderRadius,
			Math.PI * 0.5,
			Math.PI
		);

		context.arc(
			borderRadius,
			borderRadius,
			borderRadius,
			Math.PI,
			Math.PI * 1.5
		);

		if (options.fillStyle) {

			context.fill();

		}

		if (options.lineWidth) {

			context.stroke();

		}

	} else {

		if (options.fillStyle) {

			context.fillRect(0, 0, options.width, options.height);

		}

		if (options.lineWidth) {

			if (options.strokePosition === 'inset') {

				context.strokeRect(options.lineWidth / 2, options.lineWidth / 2, options.width - options.lineWidth, options.height - options.lineWidth);

			} else if (options.strokePosition === 'outset') {

				context.strokeRect(-options.lineWidth / 2, -options.lineWidth / 2, options.width + options.lineWidth, options.height + options.lineWidth);

			} else {

				context.strokeRect(0, 0, options.width, options.height);

			}

		}

	}

	context.closePath();

};

Returns

void

Facade.Rect._setMetrics() private

Sets the metrics of the rectangle based on supplied options.

Parameters

options Object

Options to set the metrics with.

test Boolean

Flag to determine if metrics are saved or not.

Examples

console.log(rect._setMetrics(rect.getAllOptions()));

Code

Facade.Rect.prototype._setMetrics = function (options, test) {

	var metrics = this.getAllMetrics(),
		anchor,
		strokeWidth = 0;

	if (options.strokePosition === 'default') {

		strokeWidth = options.lineWidth / 2;

	} else if (options.strokePosition === 'outset') {

		strokeWidth = options.lineWidth;

	}

	metrics.width = (options.width + (strokeWidth * 2)) * options.scale;
	metrics.height = (options.height + (strokeWidth * 2)) * options.scale;

	anchor = this._getAnchorPoint(options, metrics);

	metrics.x = anchor[0] + (strokeWidth * options.scale);
	metrics.y = anchor[1] + (strokeWidth * options.scale);

	if (test !== true) {

		this._metrics = metrics;

	}

	return metrics;

};

Returns

Object Updated metrics.

Facade.Text()

Create a text object. Inherits all methods from Facade.Entity.

Parameters

options Object

Options to create the text with.

Options

x Integer Optional

X coordinate to begin drawing an object. Default: 0

y Integer Optional

Y coordinate to begin drawing an object. Default: 0

shadowBlur Integer Optional

Blur level for drop shadow. Default: 0

shadowColor String Optional

Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"

  • red
  • #F00
  • rgb(255, 0, 0);
  • rgba(255, 0, 0, 1);

shadowOffsetX Integer Optional

X offset of drop shadow. Default: 0

shadowOffsetY Integer Optional

Y offset of drop shadow. Default: 0

anchor String Optional

Position to anchor the object. Default: "top/left"

  • center
  • center/right
  • bottom/right
  • bottom/center
  • bottom/left
  • center/left
  • top/left
  • top/center
  • top/right

opacity Integer Optional

Opacity of the object. Integer between 0 and 100. Default: 100

flip String Optional

Direction to flip the object. Can be either one or both of the following options. Delimited by a /. Default: ""

  • horizontal
  • vertical

rotate Integer Optional

Degrees to rotate the object. Default: 0

scale Integer Optional

Scaling of the object. A float starting at 1. Default: 1

width Integer Optional

Width of the object.

value String Optional

Value of the text object.

fontFamily String Optional

Sets the font family of the text. Only one font can be specified at a time. Default: "Arial"

fontSize Integer Optional

Font size in pixels. Default: 30

fontStyle String Optional

Font style of the text. Default: "normal"

  • normal
  • bold
  • italic

lineHeight String Optional

Line height of the text drawn on multiple lines. New lines are delimited with \n. Default: Inherits from fontSize

textAlign String Optional

Horizontal alignment of the text. Default: "left"

  • left
  • center
  • right

textBaseline String Optional

Baseline to set the vertical alignment of the text drawn. Default: "top"

  • top
  • hanging
  • middle
  • alphabetic
  • ideographic
  • bottom

fillStyle String Optional

Fill color for the object. Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"

  • red
  • #F00
  • rgb(255, 0, 0);
  • rgba(255, 0, 0, 1);

strokeStyle String Optional

Color of an object's stroke. Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"

  • red
  • #F00
  • rgb(255, 0, 0);
  • rgba(255, 0, 0, 1);

lineWidth Integer Optional

Width of the stroke. Default: 0

Examples

var text = new Facade.Text({ value: 'Hello World!', x: 250, y: 250, anchor: 'center' });

Code

Facade.Text = function (options) {

	if (!(this instanceof Facade.Text)) {

		return new Facade.Text(options);

	}

	this._options = this._defaultOptions();
	this._metrics = this._defaultMetrics();

	this._options.width = 0;
	this._options.value = '';
	this._options.fontFamily = 'Arial';
	this._options.fontSize = 30;
	this._options.fontStyle = 'normal';
	this._options.lineHeight = 0;
	this._options.textAlign = 'left';
	this._options.textBaseline = 'top';
	this._options.fillStyle = '#000';
	this._options.strokeStyle = '#000';
	this._options.lineWidth = 0;

	this.setOptions(options);

};

Returns

Object Reference to the new Facade.js text object.

Facade.Text._draw() private

Renders the text on the specified Facade.js canvas with the custom options and metrics.

Parameters

facade Object

Facade.js object.

options Object

The options to render the text with.

metrics Object

The metrics to render the text with.

Examples

text._draw(stage, text.getAllOptions(), text.getAllMetrics());

Code

Facade.Text.prototype._draw = function (facade, options, metrics) {

	var context = facade.context,
		offsetX = 0,
		line,
		length;

	this._setContext(context, options, metrics);

	if (!isArray(options.value)) {

		options.value = options.value.split(/[ ]*\n[ ]*/);

	}

	if (!options.lineHeight) {

		options.lineHeight = options.fontSize;

	}

	for (line = 0, length = options.value.length; line < length; line += 1) {

		if (options.textAlign === 'center') {

			offsetX = (options.width - context.measureText(options.value[line]).width) / 2;

		} else if (options.textAlign === 'right') {

			offsetX = options.width - context.measureText(options.value[line]).width;

		}

		if (options.fillStyle) {

			context.fillText(options.value[line], offsetX, line * options.lineHeight);

		}

		if (options.lineWidth) {

			context.strokeText(options.value[line], offsetX, line * options.lineHeight);

		}

	}

};

Returns

void

Facade.Text._setMetrics() private

Sets the metrics of the text based on supplied options.

Parameters

options Object

Options to set the metrics with.

test Boolean Optional

Flag to determine if metrics are saved or not.

Examples

console.log(text._setMetrics(text.getAllOptions()));

Code

Facade.Text.prototype._setMetrics = function (options, test) {

	var metrics = this.getAllMetrics(),
		anchor,
		line,
		length;

	_context.font = options.fontStyle + ' ' + options.fontSize + 'px ' + options.fontFamily;

	if (!isArray(options.value)) {

		options.value = options.value.split(/[ ]*\n[ ]*/);

	}

	if (!options.lineHeight) {

		options.lineHeight = options.fontSize;

	}

	for (line = 0, length = options.value.length; line < length; line += 1) {

		options.width = Math.max(options.width, _context.measureText(options.value[line]).width);

	}

	metrics.width = options.width * options.scale;
	metrics.height = (length * options.lineHeight) * options.scale;

	anchor = this._getAnchorPoint(options, metrics);

	metrics.x = anchor[0];
	metrics.y = anchor[1];

	if (test !== true) {

		this._metrics = metrics;

	}

	return metrics;

};

Returns

Object Updated metrics.