-
-
Save d1ys3nk0/395ad975d454b08f7019b4b562c859f8 to your computer and use it in GitHub Desktop.
Canvas Drawing Proxy
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment