├── README.md
├── currentTransform.js
├── license.txt
└── test
    └── test.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Canvas-currentTransform
 2 | 
 3 | HTML canvas element's CanvasRenderingContext2D has a property [currentTransform](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-currenttransform) defined. This represents a transformation matrix as a SVGMatrix object.
 4 | 
 5 | There seems to be no browser [implementation activity](https://code.google.com/p/chromium/issues/detail?id=277107) at [current](https://bugzilla.mozilla.org/show_bug.cgi?id=928150).
 6 | 
 7 | Having this property natively supported would be of great help, as we can modify the transformation matrix by `setTransform`, `transform`, `translate`, ... methods, but we are not able to access the current transform matrix element values.
 8 | 
 9 | This polyfill uses the experimental `mozCurrentTransform` or `webkitCurrentTransform` properties if available or implements a lightweight transformation matrix stack otherwise.
10 | 


--------------------------------------------------------------------------------
/currentTransform.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @fileoverview Implement 'currentTransform' of CanvasRenderingContext2D prototype (polyfill)
  3 |  * @author Stefan Goessner (c) 2015
  4 |  */
  5 | 
  6 | /**
  7 |  * extend CanvasRenderingContext2D.prototype by current transformation matrix access.
  8 |  */
  9 | if (!("currentTransform" in CanvasRenderingContext2D.prototype)) {
 10 | /**
 11 |  * define property 'currentTransform'
 12 |  */
 13 |    if ("mozCurrentTransform" in CanvasRenderingContext2D.prototype) {
 14 |       Object.defineProperty(CanvasRenderingContext2D.prototype, "currentTransform", {
 15 |          get : function() { var m = this.mozCurrentTransform; return {a:m[0],b:m[1],c:m[2],d:m[3],e:m[4],f:m[5]}; },
 16 |          set : function(x) { this.mozCurrentTransform = [x.a,x.b,x.c,x.d,x.e,x.f]; },
 17 |          enumerable : true,
 18 |          configurable : false
 19 |       });
 20 |    }
 21 |    else if ("webkitCurrentTransform" in CanvasRenderingContext2D.prototype) {
 22 |       Object.defineProperty(CanvasRenderingContext2D.prototype, "currentTransform", {
 23 |          get : function() { return this.webkitCurrentTransform; },
 24 |          set : function(x) { this.webkitCurrentTransform = x; },
 25 |          enumerable : true,
 26 |          configurable : false
 27 |       });
 28 |    }
 29 |    else {  // fully implement it ... hmm ... 'currentTransform', 'save()', 'restore()', 'transform()', 'setTransform()', 'resetTransform()'
 30 |       Object.defineProperty(CanvasRenderingContext2D.prototype, "currentTransform", {
 31 |          get : function() {return this._t2stack && this._t2stack[this._t2stack.length-1] || {a:1,b:0,c:0,d:1,e:0,f:0};},
 32 |          set : function(x) {
 33 |             if (!this._t2stack)
 34 |                this._t2stack = [{}];
 35 |             this._t2stack[this._t2stack.length-1] = {a:x.a,b:x.b,c:x.c,d:x.d,e:x.e,f:x.f};
 36 |          },
 37 |          enumerable : true,
 38 |          configurable : false
 39 |       });
 40 |       CanvasRenderingContext2D.prototype.save = function() {
 41 |          var save = CanvasRenderingContext2D.prototype.save;
 42 |          return function() {
 43 |             if (!this._t2stack)
 44 |                this._t2stack = [{a:1,b:0,c:0,d:1,e:0,f:0}];
 45 |             var t = this._t2stack[this._t2stack.length-1];
 46 |             this._t2stack.push(t && {a:t.a,b:t.b,c:t.c,d:t.d,e:t.e,f:t.f});
 47 |             save.call(this);
 48 |          }
 49 |       }();
 50 |       CanvasRenderingContext2D.prototype.restore = function() {
 51 |          var restore = CanvasRenderingContext2D.prototype.restore;
 52 |          return function() {
 53 |             if (this._t2stack) this._t2stack.pop();
 54 |             restore.call(this);
 55 |          }
 56 |       }();
 57 |       CanvasRenderingContext2D.prototype.transform = function() {
 58 |          var transform = CanvasRenderingContext2D.prototype.transform;
 59 |          return function(a,b,c,d,e,f) {
 60 |             if (!this._t2stack)
 61 |                this._t2stack = [{a:1,b:0,c:0,d:1,e:0,f:0}];
 62 |             var t = this._t2stack[this._t2stack.length-1], q;
 63 | 
 64 |             var na = t.a*a + t.c * b;
 65 |             var nb = t.b*a + t.d * b;
 66 | 
 67 |             var nc = t.a*c + t.c * d;
 68 |             var nd = t.b*c + t.d * d;
 69 | 
 70 |             var ne = t.e + t.a*e + t.c*f;
 71 |             var nf = t.f + t.b*e + t.d*f;
 72 | 
 73 |             t.a = na;
 74 |             t.b = nb;
 75 |             t.c = nc;
 76 |             t.d = nd;
 77 |             t.e = ne;
 78 |             t.f = nf;
 79 |             transform.call(this,a,b,c,d,e,f);
 80 |          }
 81 |       }();
 82 |       CanvasRenderingContext2D.prototype.setTransform = function() {
 83 |          var setTransform = CanvasRenderingContext2D.prototype.setTransform;
 84 |          return function(a,b,c,d,e,f) {
 85 |             if (!this._t2stack)
 86 |                this._t2stack = [{}];
 87 |             this._t2stack[this._t2stack.length-1] = {a:a,b:b,c:c,d:d,e:e,f:f};
 88 |             setTransform.call(this,a,b,c,d,e,f);
 89 |          }
 90 |       }();
 91 |       CanvasRenderingContext2D.prototype.resetTransform = function() {
 92 |          var resetTransform = CanvasRenderingContext2D.prototype.resetTransform;
 93 |          return function() {
 94 |             if (!this._t2stack)
 95 |                this._t2stack = [{}];
 96 |             this._t2stack[this._t2stack.length-1] = {a:1,b:0,c:0,d:1,e:0,f:0};
 97 |             resetTransform && resetTransform.call(this);
 98 |          }
 99 |       }();
100 |       CanvasRenderingContext2D.prototype.scale = function() {
101 |          var scale = CanvasRenderingContext2D.prototype.scale;
102 |          return function(sx,sy) {
103 |             if (!this._t2stack)
104 |                this._t2stack = [{a:1,b:0,c:0,d:1,e:0,f:0}];
105 |             var t = this._t2stack[this._t2stack.length-1];
106 |             sx = sx || 1;
107 |             sy = sy || sx;
108 |             t.a *= sx; t.c *= sy;
109 |             t.b *= sx; t.d *= sy;
110 |             scale.call(this,sx,sy);
111 |          }
112 |       }();
113 |       CanvasRenderingContext2D.prototype.rotate = function() {
114 |          var rotate = CanvasRenderingContext2D.prototype.rotate;
115 |          return function(w) {
116 |             if (!this._t2stack)
117 |                this._t2stack = [{a:1,b:0,c:0,d:1,e:0,f:0}];
118 |             var t = this._t2stack[this._t2stack.length-1];
119 | 
120 |             var cw = Math.cos(-w);
121 |             var sw = Math.sin(-w);
122 | 
123 |             var a = t.a*cw - t.c*sw;
124 |             var b = t.b*cw - t.d*sw;
125 |             var c = t.c*cw + t.a*sw;
126 |             var d = t.d*cw + t.b*sw;
127 | 
128 |             t.a = a;
129 |             t.b = b;
130 |             t.c = c;
131 |             t.d = d;
132 | 
133 |             return rotate.call(this,w);
134 |          }
135 |       }();
136 |       CanvasRenderingContext2D.prototype.translate = function() {
137 |          var translate = CanvasRenderingContext2D.prototype.translate;
138 |          return function(x,y) {
139 |             if (!this._t2stack)
140 |                this._t2stack = [{a:1,b:0,c:0,d:1,e:0,f:0}];
141 |             var t = this._t2stack[this._t2stack.length-1];
142 |             t.e += x*t.a + y*t.c;
143 |             t.f += x*t.b + y*t.d;
144 |             return translate.call(this,x,y);
145 |          }
146 |       }();
147 |    }
148 | }
149 | 


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Stefan Goessner
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/test/test.html:
--------------------------------------------------------------------------------
  1 | <body onload="runTest()">
  2 | <script>
  3 | var maxDelta = 0;
  4 | 
  5 | //for debug use
  6 | var maxDeltaCmdId = -1;
  7 | var commands = [];
  8 | 
  9 | // rename
 10 | if ("mozCurrentTransform" in CanvasRenderingContext2D.prototype) {
 11 |    Object.defineProperty(CanvasRenderingContext2D.prototype, "currentTransformNative", Object.getOwnPropertyDescriptor(CanvasRenderingContext2D.prototype, "mozCurrentTransform"));
 12 | }else{
 13 |   throw 'please run this test under firefox'
 14 | }
 15 | //remove
 16 | delete CanvasRenderingContext2D.prototype["mozCurrentTransform"];
 17 | 
 18 | 
 19 | function runTest(){
 20 |   maxDelta = 0;
 21 |   commands = [];
 22 | 
 23 |   var ctx = document.getElementById('canvas').getContext('2d');
 24 | 
 25 |   var numIter = 100000;
 26 |   var stackSize = 0;
 27 | 
 28 |   function arg(){
 29 |     return (random()*2 - 1)*10;
 30 |   }
 31 | 
 32 |   function angle(){
 33 |     return (random()*2 - 1)*Math.PI*4;
 34 |   }
 35 | 
 36 |   for(var i = 0; i < numIter; i++){
 37 |     //chose random command
 38 |     var cmd = random();
 39 | 
 40 |     if(cmd < 1/7){
 41 |       ctx.save();
 42 |       stackSize++;
 43 |       commands.push("save");
 44 |     }else if(cmd < 2/7 && stackSize > 0){
 45 |       ctx.restore();
 46 |       stackSize--;
 47 |       commands.push("restore");
 48 |     }else if(cmd < 3/7){
 49 |       ctx.transform(arg(),arg(),arg(),arg(),arg(),arg());
 50 |       commands.push("transform");
 51 |     }else if(cmd < 4/7){
 52 |       ctx.setTransform(arg(),arg(),arg(),arg(),arg(),arg());
 53 |       commands.push("setTransform");
 54 |     }else if (cmd < 5/7){
 55 |       ctx.scale(arg(),arg());
 56 |       commands.push("scale");
 57 |     }else if (cmd < 6/7){
 58 |       ctx.rotate(angle());
 59 |       commands.push("rotate");
 60 |     }else if(cmd < 7/7){
 61 |       ctx.translate(arg(),arg());
 62 |       commands.push("translate");
 63 |     }
 64 |     compare(ctx.currentTransformNative, ctx.currentTransform, i)
 65 | 
 66 |     // prevent too much error propagation
 67 |     if(i % 15 == 0) ctx.resetTransform();
 68 |   }
 69 | 
 70 |   var msg = "got a maximum difference of " + (100*maxDelta) +
 71 |             "<b> %</b> between native and polyfill after 15 random calls "+
 72 |             "and " + Math.floor(numIter/15) + " iterations. The maximum difference was after calling '"+commands[maxDeltaCmdId]+"'.<br/>";
 73 | 
 74 |   // 2% should be ok
 75 |   if(maxDelta < 0.02){
 76 |     msg += "<b style='color: green;'>The test passed!</b>"
 77 |   }else{
 78 |     msg += "<b style='color: red;'>The test failed!</b>"
 79 |   }
 80 |   document.getElementById('result').innerHTML = msg;
 81 | }
 82 | 
 83 | function compare(native, polyfill, i){
 84 |   //NOTE: the moz-native seedfunction returns an array.
 85 |   checkDelta(native[0],polyfill.a, i);
 86 |   checkDelta(native[1],polyfill.b, i);
 87 |   checkDelta(native[2],polyfill.c, i);
 88 |   checkDelta(native[3],polyfill.d, i);
 89 |   checkDelta(native[4],polyfill.e, i);
 90 |   checkDelta(native[5],polyfill.f, i);
 91 | 
 92 | }
 93 | 
 94 | function checkDelta(sa,sb,i){
 95 |   var a = Math.abs(sa);
 96 |   var b = Math.abs(sb);
 97 | 
 98 |   var d = (a-b)/((a+b)/2);
 99 |   if(d > maxDelta){
100 |     maxDelta = d;
101 |     maxDeltaCmdId = i;
102 |   }
103 | 
104 |   if(d > 1){
105 |     console.error("Bug in polyfill!");
106 |   }
107 | }
108 | 
109 | 
110 | // use deterministic pseudo random numbers
111 | var seed = 2711;
112 | function random() {
113 |     seed = Math.pow(seed^9465, 5) % 1500450271;
114 |     return seed/1500450271.0;
115 | }
116 | 
117 | </script>
118 | <script src="../currentTransform.js"></script>
119 | <canvas id="canvas"></canvas>
120 | <p id="result">please run this test under firefox</p>
121 | </body>
122 | 


--------------------------------------------------------------------------------