Gradient matching between WebGL and Canvas2D

1 files changed, 92 insertions, 91 deletions

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 4415af43..8fc80c60 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -508,98 +508,99 @@ exports.Rectangle = Object.create(GeomObj, {
     },
 
     render: {
-        value: function() {
-            // get the world
-            var world = this.getWorld();
-            if (!world)  throw( "null world in rectangle render" );
-
-             // get the context
-            var ctx = world.get2DContext();
-            if (!ctx)  return;
-
-            // get some dimensions
-            var lw = this._strokeWidth;
-            var w = world.getViewportWidth(),
-                h = world.getViewportHeight();
-
-            var c,
-                inset,
-                gradient,
-                colors,
-                len,
-                n,
-                position,
-                cs;
-            // render the fill
-            ctx.beginPath();
-            if (this._fillColor) {
-                inset = Math.ceil( lw ) - 0.5;
-
-                if(this._fillColor.gradientMode) {
-                    if(this._fillColor.gradientMode === "radial") {
+                value: function() {
+                        // get the world
+                        var world = this.getWorld();
+                        if (!world)  throw( "null world in rectangle render" );
+
+                         // get the context
+                        var ctx = world.get2DContext();
+                        if (!ctx)  return;
+
+                        // get some dimensions
+                        var lw = this._strokeWidth;
+                        var     w = world.getViewportWidth(),
+                                h = world.getViewportHeight();
+
+                        var c,
+                                inset,
+                                gradient,
+                                colors,
+                                len,
+                                n,
+                                position,
+                                cs;
+                        // render the fill
+                        ctx.beginPath();
+                        if (this._fillColor) {
+                                inset = Math.ceil( lw ) - 0.5;
+
+                                if(this._fillColor.gradientMode) {
+                                        if(this._fillColor.gradientMode === "radial") {
                                                 var ww = w - 2*lw,  hh = h - 2*lw;
-                        gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
-                    } else {
-                        gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
-                    }
-                    colors = this._fillColor.color;
-
-                    len = colors.length;
-
-                    for(n=0; n<len; n++) {
-                        position = colors[n].position/100;
-                        cs = colors[n].value;
-                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                    }
-
-                    ctx.fillStyle = gradient;
-
-                } else {
-                    c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
-                    ctx.fillStyle = c;
-                }
-
-                ctx.lineWidth   = lw;
-                this.renderPath( inset, ctx );
-                ctx.fill();
-                ctx.closePath();
-            }
-
-            // render the stroke
-            ctx.beginPath();
-            if (this._strokeColor) {
-                inset = Math.ceil( 0.5*lw ) - 0.5;
-
-                if(this._strokeColor.gradientMode) {
-                    if(this._strokeColor.gradientMode === "radial") {
-                        gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
-                    } else {
-                        gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-                    }
-                    colors = this._strokeColor.color;
-
-                    len = colors.length;
-
-                    for(n=0; n<len; n++) {
-                        position = colors[n].position/100;
-                        cs = colors[n].value;
-                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                    }
-
-                    ctx.strokeStyle = gradient;
-
-                } else {
-                    c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-                    ctx.strokeStyle = c;
-                }
-
-                ctx.lineWidth   = lw;
-                this.renderPath( inset, ctx );
-                ctx.stroke();
-                ctx.closePath();
-            }
-        }
-    },
+                                                //gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
+                                                gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
+                                        } else {
+                                                gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
+                                        }
+                                        colors = this._fillColor.color;
+
+                                        len = colors.length;
+
+                                        for(n=0; n<len; n++) {
+                                                position = colors[n].position/100;
+                                                cs = colors[n].value;
+                                                gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                                        }
+
+                                        ctx.fillStyle = gradient;
+
+                                } else {
+                                        c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+                                        ctx.fillStyle = c;
+                                }
+
+                                ctx.lineWidth   = lw;
+                                this.renderPath( inset, ctx );
+                                ctx.fill();
+                                ctx.closePath();
+                        }
+
+                        // render the stroke
+                        ctx.beginPath();
+                        if (this._strokeColor) {
+                                inset = Math.ceil( 0.5*lw ) - 0.5;
+
+                                if(this._strokeColor.gradientMode) {
+                                        if(this._strokeColor.gradientMode === "radial") {
+                                                gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
+                                        } else {
+                                                gradient = ctx.createLinearGradient(0, h/2, w, h/2);
+                                        }
+                                        colors = this._strokeColor.color;
+
+                                        len = colors.length;
+
+                                        for(n=0; n<len; n++) {
+                                                position = colors[n].position/100;
+                                                cs = colors[n].value;
+                                                gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                                        }
+
+                                        ctx.strokeStyle = gradient;
+
+                                } else {
+                                        c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+                                        ctx.strokeStyle = c;
+                                }
+
+                                ctx.lineWidth   = lw;
+                                this.renderPath( inset, ctx );
+                                ctx.stroke();
+                                ctx.closePath();
+                        }
+                }
+        },
 
     createStroke: {
         value: function(ctr,  width,  height,  strokeWidth,  tlRad, blRad, brRad, trRad, material) {