API Docs for: 1.4.0
Show:

File: src\utils\Canvas.ts

/**
* 
* @module Kiwi
* @submodule Utils
*/
module Kiwi.Utils {

	/**
	* Creates and the manages a Canvas DOMElement.
	* 
	* @class Canvas
	* @namespace Kiwi.Utils
	* @constructor
	* @param width {Number} The width of the canvas.
	* @param height {Number} The height of the canvas.
	* @param [visible=true] {boolean} If the canvas is visible or not.
	* @param [offScreen=false] {boolean} If the canvas is designed to be offscreen or not.
	* @return {Kiwi.Utils.Canvas} 
	*
	*/
	export class Canvas {

		constructor (width: number, height: number, visible: boolean = true, offScreen: boolean = false) {

			this.domElement = <HTMLCanvasElement> document.createElement("canvas");
			this.domElement.width = width;
			this.domElement.height = height;

			this._width = width;
			this._height = height;

			this.context = this.domElement.getContext("2d");

			this._offScreen = offScreen;
			this._visible = visible;

			if (visible === false)
			{
				this.domElement.style.display = "none";
			}

			this._bgColor = new Kiwi.Utils.Color( 0, 0, 0 );

		}

		/**
		* The width of this canvas.
		* @property _width
		* @type number
		* @private
		*/
		private _width: number;

		/**
		* The width of this canvas.
		* @property width
		* @type number
		* @public
		*/
		public set width(value: number) {
			this._width = value;
			this._updatedSize();
		}
		public get width(): number {
			return this._width;
		}

		/**
		* The height of this canvas.
		* @property _height
		* @type number
		* @private
		*/
		private _height: number;

		/**
		* The height of this canvas.
		* @property height
		* @type number
		* @private
		*/
		public set height(value: number) {
			this._height = value;
			this._updatedSize();
		}
		public get height(): number {
			return this._height;
		}

		/**
		* The type of object that this is.
		* @method objType
		* @return {String} "Canvas"
		* @public
		*/
		public objType() {
			return "Canvas";
		}

		/**
		* The canvas DOM element.
		* @property domElement
		* @type HTMLCanvasElement
		* @public
		*/
		public domElement = <HTMLCanvasElement> null;

		/**
		* The 2D rendering context that is used to render anything to this canvas.
		* @property _context
		* @type CanvasRenderingContext2D
		* @public
		*/
		public context = <CanvasRenderingContext2D> null;

		/**
		* If the canvas element is visible or not.
		* @property _visible
		* @type boolean
		* @private
		*/
		private _visible = true;

		/**
		* If the canvas is offscreen or not.
		* @property _offScreen
		* @type boolean
		* @private
		*/
		private _offScreen = false;

		/**
		* The method to use when clearing the canvas.
		* @property _clearMode
		* @type Number
		* @private
		*/
		private _clearMode: number = 1;

		/**
		* A STATIC property that holds the number associated with no clear mode.
		* @property CLEARMODE_NONE
		* @type Number
		* @static
		* @final
		* @default 0
		* @public
		*/
		public static CLEARMODE_NONE: number = 0;

		/**
		* A STATIC property that holds the number associated with the clear mode that uses the clearRect method to clear the canvas.
		* @property CLEARMODE_CLEARRECT
		* @type Number
		* @static
		* @final
		* @public
		* @default 1
		*/
		public static CLEARMODE_CLEARRECT: number = 1;

		/**
		* A STATIC property that holds the number associated with the clear mode that uses a filled rectangle to clear the canvas.
		* @property CLEARMODE_FILLRECT 
		* @type Number
		* @static
		* @final
		* @public
		* @default 2
		*/
		public static CLEARMODE_FILLRECT: number = 2;

		/**
		* A STATIC property that holds the number associated with the clear mode that uses the filled alpha rectangle method.
		* @property CLEARMODE_FILLRECT_ALPHA
		* @type Number
		* @static
		* @final
		* @public
		* @default 3
		*/
		public static CLEARMODE_FILLRECT_ALPHA: number = 3;

		/**
		* The background color to use clearing the canvas using a filled rectangle approach.
		* You may set this with any valid Kiwi.Utils.Color parameter.
		* If you set with multiple parameters, place them inside an array.
		* @property bgColor
		* @type String
		* @default "#000000"
		* @public
		*/
		public get bgColor(): any {
			return "#" + this._bgColor.getHex();
		}

		public set bgColor( value: any ) {
			if ( !Kiwi.Utils.Common.isArray( value ) ) {
				value = [ value ];
			}
			this._bgColor.set.apply( this._bgColor, value );
		}

		/**
		* Background color object.
		* @property _bgColor
		* @type Kiwi.Utils.Color
		* @private
		* @since 1.2.0
		*/
		private _bgColor: Kiwi.Utils.Color;

		/**
		* Updates the width/height on the canvas DOM element when either one of its sizes are updated.
		* @method _updatedSize
		* @private
		*/
		private _updatedSize() {

			this.domElement.width = this._width;
			this.domElement.height = this._height;

		}

		/**
		* Used to remove the canvas element completely along with this class. [NEEDS IMPLEMENTATION]
		* @method destroy
		* @public
		*/
		public destroy() {

			if (this._offScreen === false)
			{
				this.domElement.style.display = "none";
			  
			}

		}

		/**
		* If the canvas element is visible or not.
		* @property visible
		* @type boolean
		* @default true
		* @public
		*/
		public set visible(value: boolean) {

			if (value !== null && value !== this._visible)
			{
				this._visible = value;

				if (value === true)
				{
					this.domElement.style.display = "block";

				}
				else
				{
					this.domElement.style.display = "none";
				}
			}

		}
		public get visible(): boolean {

			return this._visible;

		}

		/** 
		* The clearmode the is to be used when clearing the canvas.
		* @property clearMode
		* @type Number
		* @default 1
		* @public 
		*/
		public set clearMode(value: number) {

			if (value !== null && value !== this._clearMode && value >= Kiwi.Utils.Canvas.CLEARMODE_NONE && value <= Kiwi.Utils.Canvas.CLEARMODE_FILLRECT_ALPHA)
			{
				this._clearMode = value;
			}

		}
		public get clearMode(): number {

			return this._clearMode;

		}

		/**
		* Clears the canvas using the method specified by the clearMode property.
		* @method clear
		* @public
		*/
		public clear() {
			
			if (this._clearMode === Canvas.CLEARMODE_NONE) {
				//  Do nothing
			} else if (this._clearMode === Canvas.CLEARMODE_CLEARRECT) {
				//  Clear Rect
				this.context.clearRect(0, 0, this.domElement.width, this.domElement.height);
				
			} else if (this._clearMode === Canvas.CLEARMODE_FILLRECT) {
				//  Fill Rect Solid
				this.context.fillStyle = this.bgColor;
				this.context.fillRect(0, 0, this.domElement.width, this.domElement.height);
				
			} else if (this._clearMode === Canvas.CLEARMODE_FILLRECT_ALPHA) {
				//  Clear Rect + Fill Rect (only use if bgColor contains alpha < 255)
				this.context.clearRect(0, 0, this.domElement.width, this.domElement.height);
				this.context.fillStyle = this.bgColor;
				this.context.fillRect(0, 0, this.domElement.width, this.domElement.height);
			}

		}

		/**
		* Returns the canvas current image data as PNG.
		* @method saveAsPNG
		* @return String
		* @public
		*/
		public saveAsPNG() {

			return this.domElement.toDataURL();

		}

		/**
		* Returns a string representation of this object.
		* @method toString
		* @return {string} a string representation of the instance.
		* @public
		*/
		public toString():string {
		
			return "[{Canvas (width=" + this.width + " height=" + this.height + " visible=" + this.visible + " offScreen=" + this._offScreen + " clearMode=" + this.clearMode + ")}]";

		}

	}

}