JSFiddle - React, Tailwind, and code Playground

by Cheng Long Xiao

HTML

<div style="font: 30px Arial; display: none;">A</div>	

<span>Src:</span>
<canvas id="source" width="80" height="80" style="border: 1px solid black;">Your browser does not supported HTML5!</canvas>

<hr/>

CSS

span { color: red; }

JavaScript

/** 
	 * @created Dec.20, 2013 10:22 AM 
	 * @updated Dec.24, 2013 11:22 AM 
	 */
	
	var W3C_DOM = Element.prototype.addEventListener;
	
	var IE_DOM 	= Element.prototype.attachEvent;
    
	var $ = function( id ) {
		return document.getElementById( id );
	};
		
	function addEvent( elem, evnt, func) {
		if ( elem.addEventListener )  // W3C DOM
			elem.addEventListener( evnt, func, false );
		else if ( elem.attachEvent )  // IE DOM
			elem.attachEvent( "on" + evnt, func );
		else  						  // No much to do
			elem[ evnt ] = func;
   	}
	
	var _supportedConsole = ! ( "undefined" === typeof( console ) );
	
	/** 
	 * Debugger tools(Actually that is the Browser internal Console, if your 
	 * Browser has supported.)
	 */
	var debug = debug || {		
		enable: 1,
		
		info: ! _supportedConsole ? function() {} : function( o ) {
			this.enable && console.info( o );
		},
		
		log: ! _supportedConsole ? function() {} : function( o ) {
			this.enable && console.log( o );
		},
		
		error: ! _supportedConsole ? function() {} : function( o ) {
			try { this.enable && console.error( o ); 
			} catch( e ) { debug.log( o ); 
			} finally {}
		},
		
		dir: ! _supportedConsole ? function() {} : function( o ) {
			this.enable && console.dir( o );
		} 		
	};
	
	function ImageMapper() {
	
		/** @enum{string} @const*/
		var IDS = {
			SOURCE: "source",
			RESULT: "graph-result",
			DOM_RESULT: "dom-result"
		};
		
		/** 
		 * Pixel info for ImageData.
		 * @enum(number)
		 * @const
		 */
		var PIXEL = {
			OFFSET_RED: 0,
			OFFSET_GREEN: 1,
			OFFSET_BLUE: 2,
			OFFSET_ALPAH: 3
		};
		
		var COLOR_MASK_SHIFT	= 8;		
				
		var COLORS_MASK 		= ~0xFF;
				
		var COLOR_RED_SHIFT 	= 24;
		var COLOR_GREEN_SHIFT 	= 16;
		var COLOR_BLUE_SHIFT 	= 8;
		
		var COLOR_RED_MASK 		= 0xFF << COLOR_RED_SHIFT;
		var COLOR_GREEN_MASK 	= 0xFF << COLOR_GREEN_SHIFT;
		var COLOR_BLUE_MASK 	= 0xFF << COLOR_BLUE_SHIFT;
		
		var ALPHA_MASK 			= 0xFF;
		
		var COLOR_BLACK = 0x000000;
		var COLOR_WHITE =...