3 files changed, 55 insertions, 19 deletions

diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index efd21c4a..1fae0c1d 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -117,7 +117,7 @@ var BrushStroke = function GLBrushStroke() {
     };
 
     this.getPoint = function (index) {
-        return this._Points[index];
+        return this._Points[index].slice(0);
     };
 
     this.addPoint = function (pt) {
@@ -399,7 +399,7 @@ var BrushStroke = function GLBrushStroke() {
 
             // ***** unproject all the centered points and convert them to 2D (plane space)*****
             // (undo the projection step performed by the browser)
-            localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
+            //localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
             localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv);
 
             //add to the list of local points
@@ -568,17 +568,17 @@ var BrushStroke = function GLBrushStroke() {
         }
         ctx.save();
         ctx.clearRect(0, 0, bboxWidth, bboxHeight);
-        this.drawToContext(ctx, 0, 0, false);
+        this.drawToContext(ctx, false);
         ctx.restore();
     } //this.render()
 
-    this.drawToContext = function(ctx, origX, origY, drawStageWorldPts){
+    this.drawToContext = function(ctx, drawStageWorldPts, stageWorldDeltaX, stageWorldDeltaY, stageWorldToScreenMat){
         var points = this._LocalPoints;
-        if (drawStageWorldPts){
+        if (drawStageWorldPts){ //this is usually true when we're drawing the brush stroke on the stage (no canvas yet)
             points = this._Points;
         }
         var numPoints = points.length;
-
+        var tempP, p;
         if (this._strokeUseCalligraphic) {
             //build the stamp for the brush stroke
             var t=0;
@@ -623,9 +623,23 @@ var BrushStroke = function GLBrushStroke() {
                 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")";
                 ctx.translate(disp[0],disp[1]);
                 ctx.beginPath();
-                ctx.moveTo(points[0][0]-origX, points[0][1]-origY);
+                if (drawStageWorldPts) {
+                    tempP = points[0].slice(0);
+                    tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
+                    p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                } else {
+                    p = points[0];
+                }
+                ctx.moveTo(p[0],p[1]);
                 for (var i=0;i<numPoints;i++){
-                    ctx.lineTo(points[i][0]-origX, points[i][1]-origY);
+                    if (drawStageWorldPts) {
+                        tempP = points[i].slice(0);
+                        tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
+                        p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                    } else {
+                        p = points[i];
+                    }
+                    ctx.lineTo(p[0],p[1]);
                 }
                 ctx.stroke();
                 ctx.restore();
@@ -641,13 +655,27 @@ var BrushStroke = function GLBrushStroke() {
             ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
             for (var l=0;l<numlayers;l++){
                 ctx.beginPath();
-                ctx.moveTo(points[0][0]-origX, points[0][1]-origY);
+                if (drawStageWorldPts) {
+                    tempP = points[0].slice(0);
+                    tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
+                    p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                } else {
+                    p = points[0];
+                }
+                ctx.moveTo(p[0],p[1]);
                 if (numPoints===1){
                     //display a tiny segment as a single point
-                   ctx.lineTo(points[0][0]-origX, points[0][1]-origY+0.01);
+                   ctx.lineTo(p[0],p[1]+0.01);
                 }
                 for (var i=1;i<numPoints;i++){
-                    ctx.lineTo(points[i][0]-origX, points[i][1]-origY);
+                    if (drawStageWorldPts) {
+                        tempP = points[i].slice(0);
+                        tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
+                        p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                    } else {
+                        p = points[i];
+                    }
+                    ctx.lineTo(p[0],p[1]);
                 }
                 ctx.lineWidth=2*l+minStrokeWidth;
                 ctx.stroke();
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 1073c2db..218dcfa6 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -457,9 +457,9 @@ var Circle = function GLCircle() {
                 if(this._fillColor.gradientMode) {
                     if(this._fillColor.gradientMode === "radial") {
                         gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
-                                                            xCtr, yCtr, Math.max(yScale, xScale));
+                                                            xCtr, yCtr, Math.max(this._width, this._height)/2);
                     } else {
-                        gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
+                        gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
                     }
                     colors = this._fillColor.color;
 
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 91b1d426..fcd1c1bd 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -356,7 +356,9 @@ var Rectangle = function GLRectangle() {
                 // various declarations
                 var pt,  rad,  ctr,  startPt, bPts;
                 var width  = Math.round(this.getWidth()),
-                        height = Math.round(this.getHeight());
+                        height = Math.round(this.getHeight()),
+            hw = 0.5*width,
+            hh = 0.5*height;
 
                 pt = [inset, inset];    // top left corner
 
@@ -364,6 +366,12 @@ var Rectangle = function GLRectangle() {
                 var trRad = this._trRadius;
                 var blRad = this._blRadius;
                 var brRad = this._brRadius;
+        // limit the radii to half the rectangle dimension
+        var minDimen = hw < hh ? hw : hh;
+        if (tlRad > minDimen)  tlRad = minDimen;
+        if (blRad > minDimen)  blRad = minDimen;
+        if (brRad > minDimen)  brRad = minDimen;
+        if (trRad > minDimen)  trRad = minDimen;
 
                 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
                         ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
@@ -452,13 +460,13 @@ var Rectangle = function GLRectangle() {
                 // render the fill
                 ctx.beginPath();
                 if (this._fillColor) {
-            inset = Math.ceil( lw ) + 0.5;
+            inset = Math.ceil( lw ) - 0.5;
 
             if(this._fillColor.gradientMode) {
                 if(this._fillColor.gradientMode === "radial") {
-                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset);
+                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
                 } else {
-                    gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2);
+                    gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
                 }
                 colors = this._fillColor.color;
 
@@ -486,11 +494,11 @@ var Rectangle = function GLRectangle() {
                 // render the stroke
                 ctx.beginPath();
                 if (this._strokeColor) {
-            inset = Math.ceil( 0.5*lw ) + 0.5;
+            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/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2));
+                    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);
                 }