# Layer

#####

declaration
Layer

Layers for two dimensional plotting

    var Layer = (function () {
    		function Layer (screen, id, zIndex) {
    			var _this = this;
    			this.screen = screen;
    			this.id = id;
    			this.zIndex = zIndex;

    			this.stack = [];
    			this.transformation = screen.transformation;

    			var element;

    			if (screen.options.renderer === 'Canvas') {
    				// Create the canvas
    				element = document.createElement('canvas');
    				element.className += ' MathLib_screen';
    				element.width = screen.width;
    				element.height = screen.height;
    				screen.wrapper.appendChild(element);
    				this.element = element;

    				// Get the context and apply the transformations
    				this.ctx = element.getContext('2d');
    				this.applyTransformation = function () {
    					var m = _this.transformation;
    					_this.ctx.setTransform(m[0][0], m[1][0], m[0][1], m[1][1], m[0][2], m[1][2]);
    				};
    				this.applyTransformation();

    				// Set the drawing functions
    				if (id === 'back') {
    					this.draw = function () {
    						var top = (-screen.translation.y) / screen.scale.y, bottom = (screen.height - screen.translation.y) / screen.scale.y, left = (-screen.translation.x) / screen.scale.x, right = (screen.width - screen.translation.x) / screen.scale.x;

    						// Draw the background
    						this.ctx.fillStyle = MathLib.colorConvert(screen.options.background);
    						this.ctx.fillRect(left, bottom, right - left, top - bottom);

    						this.stack.forEach(function (x) {
    							if (x.type === 'conic') {
    								x.object.draw(_this, x.options, true);
    							}
    							else if (x.type === 'text') {
    								_this.text(x.object, x.x, x.y, x.options, true);
    							}
    							else if (x.type === 'pixel') {
    								_this.pixel(x.object, x.t, x.r, x.b, x.l, x.options, true);
    							}
    							else {
    								_this[x.type](x.object, x.options, true);
    							}
    						});
    					};
    				}
    				else if (id === 'grid') {
    					this.ctx.strokeStyle = MathLib.colorConvert(screen.options.grid.color) || '#cccccc';
    					this.ctx.fillStyle = 'rgba(255, 255, 255, 0)';

    					this.draw = function () {
    						//					_this.ctx.lineWidth = (screen.options.grid.lineWidth || 4) / (screen.scale.x - screen.scale.y);
    						_this.screen.drawGrid();
    					};
    				}
    				else if (id === 'axes') {
    					this.ctx.strokeStyle = MathLib.colorConvert(screen.options.axes.color) || '#000000';

    					this.draw = function () {
    						_this.ctx.lineWidth = 4 / (screen.scale.x - screen.scale.y);
    						_this.screen.drawAxes();
    					};
    				}
    				else {
    					this.ctx.strokeStyle = '#000000';
    					this.ctx.fillStyle = 'rgba(255, 255, 255, 0)';

    					this.draw = function () {
    						_this.ctx.lineWidth = 4 / (screen.scale.x - screen.scale.y);

    						this.stack.forEach(function (x) {
    							if (x.type === 'conic') {
    								x.object.draw(_this, x.options, true);
    							}
    							else if (x.type === 'text') {
    								_this.text(x.object, x.x, x.y, x.options, true);
    							}
    							else if (x.type === 'pixel') {
    								_this.pixel(x.object, x.t, x.r, x.b, x.l, x.options, true);
    							}
    							else {
    								_this[x.type](x.object, x.options, true);
    							}
    						});
    					};
    				}

    				this.circle = MathLib.Canvas.circle;
    				this.line = MathLib.Canvas.line;
    				this.path = MathLib.Canvas.path;
    				this.pixel = MathLib.Canvas.pixel;
    				this.point = MathLib.Canvas.point;
    				this.text = MathLib.Canvas.text;
    			}
    			else if (screen.options.renderer === 'SVG') {
    				var ctx = document.createElementNS('http://www.w3.org/2000/svg', 'g'), m = screen.transformation;

    				ctx.className.baseVal = 'MathLib_layer_' + id;
    				ctx.setAttribute('transform', 'matrix(' + m[0][0] + ', ' + m[1][0] + ', ' + m[0][1] + ', ' + m[1][1] + ', ' + m[0][2] + ', ' + m[1][2] + ')');
    				screen.element.appendChild(ctx);
    				this.ctx = ctx;

    				// Set the drawing functions
    				if (id === 'back') {
    					this.draw = function () {
    						this.stack.forEach(function (x) {
    							if (x.type === 'conic') {
    								x.object.draw(_this, x.options, true);
    							}
    							else if (x.type === 'text') {
    								_this.text(x.object, x.x, x.y, x.options, true);
    							}
    							else if (x.type === 'pixel') {
    								_this.pixel(x.object, x.t, x.r, x.b, x.l, x.options, true);
    							}
    							else {
    								_this[x.type](x.object, x.options, true);
    							}
    						});
    					};
    				}
    				else if (id === 'grid') {
    					ctx.setAttribute('stroke', MathLib.colorConvert(screen.options.grid.color) || '#cccccc');

    					this.draw = function () {
    						ctx.setAttribute('stroke-width', 4 / (screen.scale.x - screen.scale.y) + '');
    						_this.screen.drawGrid();
    					};
    				}
    				else if (id === 'axes') {
    					ctx.setAttribute('stroke', MathLib.colorConvert(screen.options.axes.color) || '#000000');

    					this.draw = function () {
    						ctx.setAttribute('stroke-width', 4 / (screen.scale.x - screen.scale.y) + '');
    						_this.screen.drawAxes();
    					};
    				}
    				else {
    					this.draw = function () {
    						this.stack.forEach(function (x) {
    							if (x.type === 'conic') {
    								x.object.draw(_this, x.options, true);
    							}
    							else if (x.type === 'text') {
    								_this.text(x.object, x.x, x.y, x.options, true);
    							}
    							else if (x.type === 'pixel') {
    								_this.pixel(x.object, x.t, x.r, x.b, x.l, x.options, true);
    							}
    							else {
    								_this[x.type](x.object, x.options, true);
    							}
    						});
    					};
    				}

    				this.circle = MathLib.SVG.circle;
    				this.line = MathLib.SVG.line;
    				this.path = MathLib.SVG.path;
    				this.pixel = MathLib.SVG.pixel;
    				this.point = MathLib.SVG.point;
    				this.text = MathLib.SVG.text;
    			}

    			// Insert the layer into the layer array of the screen object.
    			screen.layer.splice(zIndex, 0, this);
    		}

# clear

#####

method
Layer.prototype.clear() → Layer

Clears the Layer

    Layer.prototype.clear = function () {
    			this.screen.renderer.clear(this);
    			return this;
    		};
    		return Layer;
    	})();
    	MathLib.Layer = Layer;
    })(MathLib || (MathLib = {}));