Merge pull request #2335 from abow/gui

GUI Demo now works in ie11

gui/src/controls/control.ts

@@ -904,5 +904,19 @@ module BABYLON.GUI {
 
             return panel;
         }
+
+        protected static drawEllipse(x:number, y:number, width:number, height:number, context:CanvasRenderingContext2D):void{
+
+            context.translate(x, y);
+            context.scale(width, height);
+
+            context.beginPath();
+            context.arc(0, 0, 1, 0, 2 * Math.PI);
+            context.closePath();
+
+            context.scale(1/width, 1/height);
+            context.translate(-x, -y);
+            
+        }
     }    
 }

gui/src/controls/ellipse.ts

@@ -28,10 +28,8 @@ module BABYLON.GUI {
         protected _localDraw(context: CanvasRenderingContext2D): void {
             context.save();
 
-            context.beginPath();
-            context.ellipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, 
-                            this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, 0, 0, 2 * Math.PI);
-            context.closePath();
+            Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, 
+                            this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);
 
             if (this._background) {
                 context.fillStyle = this._background;
@@ -61,8 +59,9 @@ module BABYLON.GUI {
         }
 
        protected _clipForChildren(context: CanvasRenderingContext2D) {
-            context.beginPath();
-            context.ellipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2, this._currentMeasure.height / 2, 0, 0, 2 * Math.PI);
+
+            Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2, this._currentMeasure.height / 2, context);
+            
             context.clip();
         }
     }    

gui/src/controls/radioButton.ts

@@ -104,19 +104,17 @@ module BABYLON.GUI {
                 let actualWidth = this._currentMeasure.width - this._thickness;
                 let actualHeight = this._currentMeasure.height - this._thickness;
 
-                // Outer                
-                context.beginPath();
-                context.ellipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, 
-                            this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, 0, 0, 2 * Math.PI);
-                context.closePath();
-
+                // Outer
+                Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, 
+                            this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);
+                
                 context.fillStyle = this._background;
                 context.fill();
 
                 context.strokeStyle = this.color;
                 context.lineWidth = this._thickness;
 
-                context.stroke(); 
+                context.stroke();
 
                 // Inner
                 if (this._isChecked) {
@@ -124,10 +122,8 @@ module BABYLON.GUI {
                     let offsetWidth = actualWidth * this._checkSizeRatio;
                     let offseHeight = actualHeight * this._checkSizeRatio;
 
-                    context.beginPath();
-                    context.ellipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, 
-                                    offsetWidth / 2 - this._thickness / 2, offseHeight / 2  - this._thickness / 2, 0, 0, 2 * Math.PI);
-                    context.closePath();
+                    Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, 
+                                    offsetWidth / 2 - this._thickness / 2, offseHeight / 2  - this._thickness / 2, context);
 
                     context.fill();
                 }