lysenkooo/drawingproxy.js

## drawingproxy.js
function DrawingProxy(ctx){
"use strict";

setContext(ctx);

var lastMethod, History, slice=Array.prototype.slice;

Object.defineProperty(Main,"context",{get : function(){return ctx}, set : setContext});
Object.defineProperty(Main,"$",{get : $});

for (var m in ctx) if (typeof ctx[m]=="function") Main[m]=addMethod.bind(ctx[m]);

return Main;

function Main(){
if (History) {History.push(lastMethod,slice.call(arguments,0))}
else lastMethod.apply(ctx,arguments);
return Main;
}

function setContext(o){
	if (o instanceof window.CanvasRenderingContext2D){ctx=o}else throw new TypeError};

function $(){
var H=History;
if (H){	History=null; return runHistory.bind(H)};
History=new Array();
return Main;
}

function runHistory(loop){
	loop=loop||1;
	var ret,i;
	if (loop<0||loop%1!=0) throw new TypeError;
	while ((loop) && (ret===undefined)){
		for(i=0;(i<this.length) && (ret===undefined);)
			ret=this[i++].apply(ctx,this[i++]);
		if (i<this.length) throw new Error("Method is not chainable.");
		loop--;
	};
	if (loop) throw new Error("Chain is not repeatable.");
	return (ret===undefined)? Main : ret;
}

function addMethod(){
	if (History) {
		lastMethod=this;
		History.push(this,slice.call(arguments,0));
	} else {
		var ret=this.apply(ctx,arguments);
		if (ret!==undefined) return ret;
		lastMethod=this;
	};
	return Main;
}
};

## gistfile1.html
<!docytpe html>
<html>
<head>
<script src="drawingproxy.js"></script>
<script>
window.onload=function(){
var $=document.getElementById.bind(document);
var ctx1=$("myCanvas1").getContext("2d");
var ctx2=$("myCanvas2").getContext("2d");
var dp=DrawingProxy(ctx1);
dp.beginPath().moveTo(100,100).lineTo(300,100).lineTo(300,300).lineTo(100,300).closePath().stroke();
dp.context=ctx2;
dp.beginPath().moveTo(100,100).lineTo(300,100)(300,300)(100,300).closePath().stroke();
dp.beginPath().moveTo(220,10).arcTo(280,10,280,90,20)(280,90,200,90,20)(200,90,200,10,20)(200,10,280,10,20).closePath().stroke();
var f=dp.$.beginPath().moveTo(10,10).lineTo(40,10)(40,40)(10,40).closePath().stroke().$;
f();
dp.context=ctx1;
f();
dp.$.beginPath().moveTo(100,10).lineTo(130,10)(130,40)(100,40).closePath().stroke().$();
dp.save().beginPath().translate(200,200).moveTo(0,0).$.translate(60,0).lineTo(0,0).rotate(Math.PI*0.8).$(4).closePath().restore().fill();
}
</script>
</head>
<body>
<canvas id="myCanvas1" height=400 width=400 style="border:1px solid black"></canvas>
<canvas id="myCanvas2" height=400 width=400 style="border:1px solid black"></canvas>
</body>
</html>
	function DrawingProxy(ctx){
	"use strict";

	setContext(ctx);

	var lastMethod, History, slice=Array.prototype.slice;

	Object.defineProperty(Main,"context",{get : function(){return ctx}, set : setContext});
	Object.defineProperty(Main,"$",{get : $});

	for (var m in ctx) if (typeof ctx[m]=="function") Main[m]=addMethod.bind(ctx[m]);

	return Main;

	function Main(){
	if (History) {History.push(lastMethod,slice.call(arguments,0))}
	else lastMethod.apply(ctx,arguments);
	return Main;
	}

	function setContext(o){
	if (o instanceof window.CanvasRenderingContext2D){ctx=o}else throw new TypeError};

	function $(){
	var H=History;
	if (H){ History=null; return runHistory.bind(H)};
	History=new Array();
	return Main;
	}

	function runHistory(loop){
	loop=loop\|\|1;
	var ret,i;
	if (loop<0\|\|loop%1!=0) throw new TypeError;
	while ((loop) && (ret===undefined)){
	for(i=0;(i<this.length) && (ret===undefined);)
	ret=this[i++].apply(ctx,this[i++]);
	if (i<this.length) throw new Error("Method is not chainable.");
	loop--;
	};
	if (loop) throw new Error("Chain is not repeatable.");
	return (ret===undefined)? Main : ret;
	}

	function addMethod(){
	if (History) {
	lastMethod=this;
	History.push(this,slice.call(arguments,0));
	} else {
	var ret=this.apply(ctx,arguments);
	if (ret!==undefined) return ret;
	lastMethod=this;
	};
	return Main;
	}
	};
	<!docytpe html>
	<html>
	<head>
	<script src="drawingproxy.js"></script>
	<script>
	window.onload=function(){
	var $=document.getElementById.bind(document);
	var ctx1=$("myCanvas1").getContext("2d");
	var ctx2=$("myCanvas2").getContext("2d");
	var dp=DrawingProxy(ctx1);
	dp.beginPath().moveTo(100,100).lineTo(300,100).lineTo(300,300).lineTo(100,300).closePath().stroke();
	dp.context=ctx2;
	dp.beginPath().moveTo(100,100).lineTo(300,100)(300,300)(100,300).closePath().stroke();
	dp.beginPath().moveTo(220,10).arcTo(280,10,280,90,20)(280,90,200,90,20)(200,90,200,10,20)(200,10,280,10,20).closePath().stroke();
	var f=dp.$.beginPath().moveTo(10,10).lineTo(40,10)(40,40)(10,40).closePath().stroke().$;
	f();
	dp.context=ctx1;
	f();
	dp.$.beginPath().moveTo(100,10).lineTo(130,10)(130,40)(100,40).closePath().stroke().$();
	dp.save().beginPath().translate(200,200).moveTo(0,0).$.translate(60,0).lineTo(0,0).rotate(Math.PI*0.8).$(4).closePath().restore().fill();
	}
	</script>
	</head>
	<body>
	<canvas id="myCanvas1" height=400 width=400 style="border:1px solid black"></canvas>
	<canvas id="myCanvas2" height=400 width=400 style="border:1px solid black"></canvas>
	</body>
	</html>