API Docs for: 0.1.0
Show:

File: src/zerk/class/game/engine/system/viewport/canvas.js

/**
 * Canvas Viewport System
 * 
 * Visualization implementation for HTML Canvas.
 * 
 * @class canvas
 * @namespace zerk.game.engine.system.viewport
 * @extends zerk.game.engine.system.viewport
 * @module zerk
 **/
zerk.define({
	
	name: 'zerk.game.engine.system.viewport.canvas',
	extend: 'zerk.game.engine.system.viewport'
	
},{
	
	/**
	 * Register for canvas references
	 * 
	 * @property _canvas
	 * @type Object
	 * @protected
	 **/
	_canvas: {},
	
	/**
	 * Register for canvas context references
	 * 
	 * @property _context
	 * @type Object
	 * @protected
	 **/
	_context: {},
	
	/**
	 * Class constructor
	 * 
	 * @method init
	 * @param {zerk.game.engine} engine Game engine
	 * @param {Object} config System configuration
	 **/
	init: function(engine,config) {
		
		zerk.parent('zerk.game.engine.system.viewport.canvas').init.apply(
			this,
			arguments
		);
		
	},
	
	/**
	 * Creates multiple buffers
	 * 
	 * @method createBuffers
	 * @param {Object} buffers A list of buffers to be created
	 * @deprecated
	 **/
	createBuffers: function(buffers) {
		
		for (var buffer in buffers) {
			
			var canvas=this._createCanvas(
				'zerk_canvas_'+buffer,
				buffers[buffer].width,
				buffers[buffer].height,
				buffers[buffer].visible
			);
			
			this._canvas[buffer]=canvas;
			this._context[buffer]=canvas.getContext('2d');
			
		}
		
	},
	
	/**
	 * Returns a canvas position relative to its parent HTML document
	 * 
	 * @method getCanvasPosition
	 * @param {String} buffer Buffer id
	 * @return {Object} An object containing x and y
	 **/
	getCanvasPosition: function(buffer) {
		
		var canvas=this._getCanvas(buffer);
		
		return zerk.browser.getElementPosition(canvas);
		
	},
	
	/**
	 * Return a canvas element for given buffer id
	 * 
	 * @method getCanvasElement
	 * @param {String} buffer Buffer id
	 * @return {DOMElement} Canvas element
	 **/
	getCanvasElement: function(buffer) {
		
		return this._getCanvas(buffer);
		
	},
	
	/**
	 * Returns the size of the buffer by given id
	 * 
	 * @method getBufferSize
	 * @param {String} buffer Buffer id
	 * @return {Object} An object containing with and height
	 **/
	getBufferSize: function(buffer) {
		
		var canvas=this._getCanvas(buffer);
		
		return {
			width: canvas.width,
			height: canvas.height
		};
		
	},
	
	/**
	 * Initializes a buffer for drawing
	 * 
	 * @method bufferInit
	 * @param {String} buffer Buffer id
	 * @param {Float} width Width
	 * @param {Float} height Height
	 * @param {Float} x Center x
	 * @param {Float} y Center y
	 * @param {Float} angle Angle
	 **/
	bufferInit: function(buffer,width,height,x,y,angle) {
		
		var canvas=this._getCanvas(buffer);
		var context=this._getContext(buffer);
		
		canvas.width=width;
		canvas.height=height;
		
		context.translate(x,y);
		context.rotate(angle);
		
	},
	
	/**
	 * Flush a buffers content onto another buffer
	 * 
	 * @method bufferFlush
	 * @param {String} source Source buffer id
	 * @param {String} target Target buffer id
	 * @param {Float} width Target width
	 * @param {Float} height Target height
	 * @param {Float} x Target horizontal position
	 * @param {Float} y Target vertical position
	 **/
	bufferFlush: function(source,target,x,y,width,height) {
		
		var sourceCanvas=this._getCanvas(source);
		var targetContext=this._getContext(target);
		
		targetContext.drawImage(
			sourceCanvas,
			0,
			0,
			sourceCanvas.width,
			sourceCanvas.height,
			x,
			y,
			width,
			height
		);
		
	},
	
	/**
	 * Clear a buffer by given buffer id
	 * 
	 * @method bufferClear
	 * @param {String} buffer Buffer id
	 **/
	bufferClear: function(buffer) {
		
		var canvas=this._getCanvas(buffer);
		
		canvas.width=canvas.width;
		
	},
	
	/**
	 * Draw lines
	 * 
	 * @method drawLines
	 * @param {String} buffer Buffer id
	 * @param {Object} lines Two dimensional array containing the lines
	 * @param {String} color RGB color
	 * @param {Float} lineWidth Width of the lines
	 **/
	drawLines: function(buffer,lines,color,lineWidth) {
		
		var context=this._getContext(buffer);
		
		context.save();
		
		context.beginPath();
		context.strokeStyle=color;
		context.lineWidth=lineWidth;
		
		for (var i=0;i<lines.length;i++) {
			
			context.moveTo(
				lines[i][0],
				lines[i][1]
			);
			
			context.lineTo(
				lines[i][2],
				lines[i][3]
			);
			
		}
		
		context.stroke();
		
		context.restore();
		
	},
	
	/**
	 * Draw a rectangle
	 * 
	 * @method drawRect
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 **/
	drawRect: function(
		buffer,
		x,
		y,
		width,
		height,
		fillColor,
		strokeColor,
		lineWidth
	) {
		
		var context=this._getContext(buffer);
		
		context.save();
		
		if (zerk.isDefined(fillColor)) {
			
			context.fillStyle=fillColor;
			
			context.strokeRect(
				x,
				y,
				width,
				height
			);
			
		}
		
		if (zerk.isDefined(strokeColor)) {
			
			context.strokeStyle=strokeColor;
			context.lineWidth=lineWidth;
			
			context.strokeRect(
				x,
				y,
				width,
				height
			);
			
		}
		
		context.restore();
		
	},
	
	/**
	 * PUBLIC_METHOD_DESCRIPTION
	 * 
	 * @method fillRect
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * 	SECOND_LINE
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 **/
	fillRect: function(buffer,x,y,width,height,image) {
		
		image=document.getElementById('test-texture-grey');
		
		var context=this._getContext(buffer);
		
		var pattern=context.createPattern(image,'repeat');
		
		context.save();
		
		context.beginPath();
		context.fillStyle=pattern;
		context.fillRect(
			x,
			y,
			width,
			height
		);
		
		context.restore();
		
	},
	
	/**
	 * PUBLIC_METHOD_DESCRIPTION
	 * 
	 * @method drawArc
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * 	SECOND_LINE
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 **/
	drawArc: function(
		buffer,
		x,
		y,
		radius,
		startAngle,
		endAngle,
		anticlockwise,
		fillColor,
		strokeColor,
		lineWidth
	) {
		
		var context=this._getContext(buffer);
		
		context.save();
		
		context.beginPath();
		
		context.arc(
			x,
			y,
			radius,
			startAngle,
			endAngle,
			anticlockwise
		);
		context.closePath();
		
		if (zerk.isDefined(strokeColor)) {
			
			context.strokeStyle=strokeColor;
			context.lineWidth=lineWidth;
			context.stroke();
			
		}
		
		if (zerk.isDefined(fillColor)) {
			
			context.fillStyle=fillColor;
			context.fill();
			
		}
		
		context.restore();
		
	},
	
	/**
	 * PUBLIC_METHOD_DESCRIPTION
	 * 
	 * @method fillArc
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * 	SECOND_LINE
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 **/
	fillArc: function(
		buffer,
		x,
		y,
		radius,
		startAngle,
		endAngle,
		anticlockwise,
		image
	) {
		
		image=document.getElementById('test-texture-grey');
		
		var context=this._getContext(buffer);
		
		var pattern=context.createPattern(image,'repeat');
		
		context.save();
		
		context.beginPath();
		context.fillStyle=pattern;
		context.arc(
			x,
			y,
			radius,
			startAngle,
			endAngle,
			anticlockwise
		);
		context.closePath();
		context.fill();
		
		context.restore();
		
	},
	
	/**
	 * PUBLIC_METHOD_DESCRIPTION
	 * 
	 * @method drawPolygon
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * 	SECOND_LINE
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 **/
	drawPolygon: function(
		buffer,
		vertices,
		fillColor,
		strokeColor,
		lineWidth
	) {
		
		var context=this._getContext(buffer);
		
		context.save();
		
		context.beginPath();
		
		for (var i=0;i<vertices.length;i++) {
			
			if (i==0) {
				
				context.moveTo(
					vertices[i][0],
					vertices[i][1]
				);
				
			} else {
				
				context.lineTo(
					vertices[i][0],
					vertices[i][1]
				);
				
			}
			
		}
		
		context.closePath();
		
		if (zerk.isDefined(strokeColor)) {
			
			context.strokeStyle=strokeColor;
			context.lineWidth=lineWidth;
			context.stroke();
			
		}
		
		if (zerk.isDefined(fillColor)) {
			
			context.fillStyle=fillColor;
			context.fill();
			
		}
		
		context.restore();
		
	},
	
	/**
	 * PUBLIC_METHOD_DESCRIPTION
	 * 
	 * @method fillPolygon
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * 	SECOND_LINE
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 **/	
	fillPolygon: function(buffer,vertices,image) {
		
		image=document.getElementById('test-texture-grey');
		
		var context=this._getContext(buffer);
		
		var pattern=context.createPattern(image,'repeat');
		
		context.save();
		
		context.beginPath();
		context.fillStyle=pattern;
		
		for (var i=0;i<vertices.length;i++) {
			
			if (i==0) {
				
				context.moveTo(
					vertices[i][0],
					vertices[i][1]
				);
				
			} else {
				
				context.lineTo(
					vertices[i][0],
					vertices[i][1]
				);
				
			}
			
		}
		
		context.closePath();
		context.fill();
		
		context.restore();
		
	},
	
	/**
	 * PUBLIC_METHOD_DESCRIPTION
	 * 
	 * @method drawText
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * 	SECOND_LINE
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 **/
	drawText: function(
		buffer,
		text,
		x,
		y,
		font,
		size,
		color,
		horizontalAlign,
		verticalAlign
	) {
		
		var context=this._getContext(buffer);
		var canvas=this._getCanvas(buffer);
		
		context.save();
		
		if (typeof font=='undefined') {
			
			font='sans-serif';
			
		}
		
		if (typeof size=='undefined') {
			
			size=20;
			
		}
		
		if (typeof color=='undefined') {
			
			color='rgb(0,255,0)';
			
		}
		
		context.font=size+'pt '+font;
		context.fillStyle=color;
		
		var measure=context.measureText(text);
		
		var posX=0,posY=0;
		
		if (horizontalAlign=='left') {
			
			posX=(canvas.width/2)+x;
			
		} else if (horizontalAlign=='right') {
			
			posX=(canvas.width/2)-measure.width+x;
			
		} else {
			
			posX=(canvas.width/2)-(measure.width/2)+x;
			
		}
		
		if (verticalAlign=='top') {
			
			posY=(canvas.height/2)+size+y;
			
		} else if (verticalAlign=='bottom') {
			
			posY=(canvas.height/2)+y;
			
		} else {
			
			posY=(canvas.height/2)+(size/2)+y;
			
		}
		
		context.fillText(
			text,
			posX,
			posY
		);
		
		context.restore();
		
	},
	
	/**
	 * Returns the physics debug canvas DOM element
	 * 
	 * @method getCanvasPhysicsDebug
	 * @return {DOMElement} Physics debug canvas DOM element
	 **/
	getCanvasPhysicsDebug: function() {
	
		/*
		 * TODO Restore physics debug rendering
		 */
		/*
		// Create canvas on first usage
		if (!this._canvasPhysicsDebug) {
			this._canvasPhysicsDebug=this._createCanvas(
				'zerk_canvas_physics_debug',
				650,
				450,
				true
			);
		}
		
		return this._canvasPhysicsDebug;
		*/
		
	},
	
	/**
	 * Creates a canvas DOM element
	 * 
	 * @method _createCanvas
	 * @param {String} id DOM id
	 * @param {Integer} width Canvas width
	 * @param {Integer} height Canvas height
	 * @param {Boolean} visible Canvas visibility
	 * @return {DOMElement} Canvas DOM element
	 * @protected
	 **/
	_createCanvas: function(id,width,height,visible) {
		
		var canvas=document.getElementById(id);
		
		if (canvas) {
			
			return canvas;
			
		}
		
		canvas=document.createElement('canvas');
		
		canvas.id=id;
		
		if (width) {
			
			canvas.width=width;
			
		}
		if (height) {
			
			canvas.height=height;
			
		}
		
		if (!visible) {
			
			canvas.style.display='none';
			
		}
		
		var body=document.getElementsByTagName('body')[0];
		
		return body.appendChild(canvas);
		
	},
	
	/**
	 * PROTECTED_METHOD_DESCRIPTION
	 * 
	 * @method _getCanvas
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * 	SECOND_LINE
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 * @protected
	 * @async
	 * @deprecated
	 **/
	_getCanvas: function(buffer) {
		
		return this._canvas[buffer];
		
	},
	
	/**
	 * PROTECTED_METHOD_DESCRIPTION
	 * 
	 * @method _getContext
	 * @param {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} PARAM_NAME PARAM_DESCRIPTION
	 * 	SECOND_LINE
	 * @return {Boolean|Integer|Float|String|Object|Array|Function|Mixed|Any|CLASS_NAME} RETURN_DESCRIPTION
	 * @protected
	 * @async
	 * @deprecated
	 **/
	_getContext: function(buffer) {
		
		return this._context[buffer];
		
	}
	
});