created Control.drawEllipse

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,14 +28,9 @@ module BABYLON.GUI {
         protected _localDraw(context: CanvasRenderingContext2D): void {
             context.save();
 
-            context.translate(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2);
-            context.scale(this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2);
+            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.beginPath();
-            context.arc(0, 0, 1, 0, 2 * Math.PI);
-
-            context.restore();
-            
             if (this._background) {
                 context.fillStyle = this._background;
 
@@ -64,11 +59,8 @@ module BABYLON.GUI {
         }
 
        protected _clipForChildren(context: CanvasRenderingContext2D) {
-            context.translate(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2);
-            context.scale(this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2);
-            context.beginPath();
 
-            context.arc(0, 0, 1, 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

@@ -105,21 +105,16 @@ module BABYLON.GUI {
                 let actualHeight = this._currentMeasure.height - this._thickness;
 
                 // Outer
-                context.translate(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2);
-                context.scale(this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2);
-
-                context.beginPath();
-                context.arc(0, 0, 1, 0, 2 * Math.PI);
-
-                context.restore();
-
+                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) {
@@ -127,14 +122,9 @@ module BABYLON.GUI {
                     let offsetWidth = actualWidth * this._checkSizeRatio;
                     let offseHeight = actualHeight * this._checkSizeRatio;
 
-                    context.translate(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2);
-                    context.scale(offsetWidth / 2 - this._thickness / 2, offseHeight / 2  - this._thickness / 2);
-
-                    context.beginPath();
-                    context.arc(0, 0, 1, 0, 2 * Math.PI);
+                    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.restore();
-                    
                     context.fill();
                 }