ShadowCanvas : Drawing illustration with css box-shadow

shadowcanvas.js

/**
 * ShadowCanvas
 * 
 * Drawing illustration with css box-shadow
 *
 * @version 0.9
 * @author mach3ss
 * @require jQuery
 */
var ShadowCanvas = function(selector, option){

	// config
	this.option = $.extend({}, this.option, option);
	this.node = $.extend({}, this.node);

	// nodes
	this.node.container = $(selector);
	this.node.canvas = $("<div>")
	.css({position:"absolute"})
	.appendTo(this.node.container);

	// events
	this.node.container
	.on("mousemove", $.proxy(this._onMouseMove, this))
	.on("mousedown", $.proxy(this.start, this))
	.on("mouseleave mouseup", $.proxy(this.stop, this));
};
(function(fn){

	fn.boxShadowText = "{x}px {y}px {blur}px {size}px {color}";
	fn.drawing = false;

	fn.node = {
		container : null,
		canvas : null
	};

	fn.option = {
		color: "black",
		blur : 5,
		size : 5 
	};

	/**
	 * Configure option or get the option value
	 *
	 * @param String key
	 * @param Mixed value (optional)
	 * @return Mixed
	 */
	fn.config = function(key, value){
		if(this.option.hasOwnProperty(key)){
			if(typeof(value) !== "undefined"){
				this.option[key] = value;
				return this;
			} else {
				return this.option[key];
			}
		}
	};

	/**
	 * Get css text for box-shadow
	 * 
	 * @param Integer x
	 * @param Integer y
	 * @return String
	 */
	fn._getBoxShadowText = function(x, y){
		var o, callback;
		o = this.option;
		o.x = x;
		o.y = y;
		callback = function(a, b){
			return o[b];
		};
		return this.boxShadowText.replace((/\{(\w+)\}/g), callback);
	};

	/**
	 * Draw the point with box-shadow
	 * 
	 * @param Integer x
	 * @param Integer y
	 * @return self
	 */
	fn.draw = function(x, y){
		var shadow = this.node.canvas.css("boxShadow");
		shadow = shadow === "none" ? "" : "," + shadow ;
		shadow = this._getBoxShadowText(x, y) + shadow;
		this.node.canvas.css("boxShadow", shadow);
		return this;
	};


	/**
	 * Start drawing
	 *
	 * @return self
	 */
	fn.start = function(){
		this.drawing = true;
		return this;
	};

	/**
	 * Stop drawing
	 *
	 * @return self
	 */
	fn.stop = function(){
		this.drawing = false;
		return this;
	};

	fn._onMouseMove = function(e){
		var offset, x, y;

		if(! this.drawing){
			return;
		}

		offset = this.node.container.offset();
		x = e.clientX - offset.left + document.body.scrollLeft;
		y = e.clientY - offset.top + document.body.scrollTop;
		if(x < this.node.container.width() && y < this.node.container.height()){
			this.draw(x, y);
		}
	};

	/**
	 * Clear all on canvas
	 *
	 * @return self
	 */
	fn.clear = function(){
		this.node.canvas.css("boxShadow", "none");
		return this;
	};

	/**
	 * Get css text of the illustration on canvas now
	 *
	 * @return String
	 */
	fn.getCSS = function(){
		return this.node.canvas.css("boxShadow");
	};
	
}(ShadowCanvas.prototype));