Updated canvas-runtime.js to support gradients for rectangle and oval in canvas2d shape mode. Also fixed some typos.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

1 files changed, 231 insertions, 146 deletions

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index 32829351..ee9f24a4 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -288,23 +288,23 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj,  assetPath )
 
         this.importObject = function( jObj,  parent )
         {
-                var type = jObj.type
+                var type = jObj.type;
                 var obj;
                 switch (type)
                 {
                         case 1:
                                 obj = new NinjaCvsRt.RuntimeRectangle();
-                                obj.importJSON( jObj, parent );
+                                obj.importJSON( jObj );
                                 break;
 
                         case 2:         // circle
                                 obj = new NinjaCvsRt.RuntimeOval();
-                                obj.importJSON( jObj, parent );
+                                obj.importJSON( jObj );
                                 break;
 
                         case 3:         // line
                                 obj = new NinjaCvsRt.RuntimeLine();
-                                obj.importJSON( jObj, parent );
+                                obj.importJSON( jObj );
                                 break;
 
                         default:
@@ -513,7 +513,7 @@ NinjaCvsRt.RuntimeGeomObj = function ()
                                 case "pulse":                   mat = new NinjaCvsRt.RuntimePulseMaterial();                            break;
 
                                 default:
-                                        console.log( "material type: " + materialType + " is not supported" );
+                                        console.log( "material type: " + shaderName + " is not supported" );
                                         break;
                         }
 
@@ -741,7 +741,7 @@ NinjaCvsRt.RuntimeRectangle = function ()
                                 ctx.quadraticCurveTo( width-inset, inset,  width-inset-rad, inset );
 
                         // do the top of the rectangle
-                        pt = [inset, inset]
+                        pt = [inset, inset];
                         rad = tlRad - inset;
                         if (rad < 0)  rad = 0;
                         pt[0] += rad;
@@ -770,34 +770,81 @@ NinjaCvsRt.RuntimeRectangle = function ()
                 var     w = world.getViewportWidth(),
                         h = world.getViewportHeight();
                 
-                // render the fill
-                ctx.beginPath();
-        var c = null, inset = 0;
-                if (this._fillColor)
-                {
-                        c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";  
-                        ctx.fillStyle = c;
-
-                        ctx.lineWidth   = lw;
-                        inset = Math.ceil( lw ) + 0.5;
-                        this.renderPath( inset, ctx );
-                        ctx.fill();
-                        ctx.closePath();
-                }
+        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") {
+                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset);
+                } else {
+                    gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2);
+                }
+                colors = this._fillColor.color;
 
-                // render the stroke
-                ctx.beginPath();
-                if (this._strokeColor)
-                {
-                        c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";  
-                        ctx.strokeStyle = c;
+                len = colors.length;
 
-                        ctx.lineWidth   = lw;
-                        inset = Math.ceil( 0.5*lw ) + 0.5;
-                        this.renderPath( inset, ctx );
-                        ctx.stroke();
-                        ctx.closePath();
-                }
+                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/2, w/2)-inset, w/2, h/2, Math.max(h/2, 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();
+        }
     };
 };
 
@@ -963,126 +1010,163 @@ NinjaCvsRt.RuntimeOval = function ()
                 if (bezPts)
                 {
                         var n = bezPts.length;
+            var gradient,
+                colors,
+                len,
+                j,
+                position,
+                cs,
+                c;
+
+            // set up the fill style
+            ctx.beginPath();
+            ctx.lineWidth = 0;
+            if (this._fillColor) {
+                if(this._fillColor.gradientMode) {
+                    if(this._fillColor.gradientMode === "radial") {
+                        gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
+                                                            xCtr, yCtr, Math.max(yScale, xScale));
+                    } else {
+                        gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
+                    }
+                    colors = this._fillColor.color;
+
+                    len = colors.length;
+
+                    for(j=0; j<len; j++) {
+                        position = colors[j].position/100;
+                        cs = colors[j].value;
+                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                    }
+
+                    ctx.fillStyle = gradient;
 
-                        // set up the fill style
-                        ctx.beginPath();
-                        ctx.lineWidth = 0;
-            var c;
-                        if (this._fillColor)
-                        {
-                                c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";  
-                                ctx.fillStyle = c;
-
-                                // draw the fill
-                                ctx.beginPath();
-                                var p = this.transformPoint( bezPts[0],   mat );
-                                ctx.moveTo( p[0],  p[1] );
-                                var index = 1;
-                                while (index < n)
-                                {
-                                        p0 = this.transformPoint( bezPts[index],  mat );
-                                        p1 = this.transformPoint( bezPts[index+1],  mat );
-
-                                        x0 = p0[0];  y0 = p0[1];
-                                        x1 = p1[0];  y1 = p1[1];
-                                        ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
+                } else {
+                    c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+                    ctx.fillStyle = c;
+                }
+                // draw the fill
+//                              ctx.beginPath();
+                var p = this.transformPoint( bezPts[0],   mat );
+                ctx.moveTo( p[0],  p[1] );
+                var index = 1;
+                while (index < n) {
+                    p0   = this.transformPoint( bezPts[index],  mat );
+                    p1 = this.transformPoint( bezPts[index+1],  mat );
+
+                    x0 = p0[0];  y0 = p0[1];
+                    x1 = p1[0];  y1 = p1[1];
+                    ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
+                    index += 2;
+                }