moved all rendering logic into the Canvas renderer modules. Shape draw funcs are now passed a renderer object, not a canvas context. The context is accessible via canvas.getContext()

src/Canvas.js

@@ -1,19 +1,17 @@
 (function() {
     /**
-     * Canvas wrapper constructor
+     * Canvas Renderer constructor
      * @constructor
      * @param {Number} width
      * @param {Number} height
      */
-    Kinetic.Canvas = function(width, height, isHit) {
+    Kinetic.Canvas = function(width, height) {
         this.element = document.createElement('canvas');
         this.context = this.element.getContext('2d');
 
         // set dimensions
         this.element.width = width || 0;
         this.element.height = height || 0;
-
-        this.context.renderer = isHit ? new Kinetic.HitRenderer(this.context) : new Kinetic.SceneRenderer(this.context);
     };
 
     Kinetic.Canvas.prototype = {
@@ -102,14 +100,77 @@
                     return '';
                 }
             }
+        },
+        /**
+         * fill current path
+         * @name fill
+         * @methodOf Kinetic.Canvas.prototype
+         */
+        fill: function(shape) {
+            this._fill(shape);
+        },
+        /**
+         * stroke current path
+         * @name stroke
+         * @methodOf Kinetic.Canvas.prototype
+         */
+        stroke: function(shape) {
+            this._stroke(shape);
+        },
+        /**
+         * fill and stroke current path.  Aside from being a convenience method
+         *  which fills and strokes the current path with a single method, its main purpose is
+         *  to ensure that the shadow object is not applied to both the fill and stroke.  A shadow
+         *  will only be applied to either the fill or stroke.  Fill
+         *  is given priority over stroke.
+         * @name fillStroke
+         * @param {CanvasContext} context
+         * @methodOf Kinetic.Canvas.prototype
+         */
+        fillStroke: function(shape) {
+            this._fill(shape);
+            this._stroke(shape, shape.getShadow() && shape.getFill());
+        },
+        /**
+         * apply shadow
+         * @name applyShadow
+         * @param {CanvasContext} context
+         * @param {Function} func draw function
+         * @methodOf Kinetic.Canvas.prototype
+         */
+        applyShadow: function(shape, func) {
+            var context = this.context;
+            context.save();
+            this._applyShadow(shape);
+            func();
+            context.restore();
+            func();
+        },
+        _applyLineCap: function(shape) {
+            var lineCap = shape.getLineCap();
+            if(lineCap) {
+                this.context.lineCap = lineCap;
+            }
+        },
+        _applyOpacity: function(shape) {
+            var absOpacity = shape.getAbsoluteOpacity();
+            if(absOpacity !== 1) {
+                this.context.globalAlpha = absOpacity;
+            }
+        },
+        _applyLineJoin: function(shape) {
+            var lineJoin = shape.getLineJoin();
+            if(lineJoin) {
+                this.context.lineJoin = lineJoin;
+            }
         }
     };
 
-    Kinetic.SceneRenderer = function(context) {
+    Kinetic.SceneCanvas = function(width, height) {
-        this.context = context;
+        Kinetic.Canvas.call(this, width, height);
     };
 
-    Kinetic.SceneRenderer.prototype = {
+    Kinetic.SceneCanvas.prototype = {
         _fill: function(shape, skipShadow) {
             var context = this.context, fill = shape.getFill(), fillType = shape._getFillType(fill), shadow = shape.getShadow();
             if(fill) {
@@ -228,20 +289,15 @@
                 context.shadowOffsetX = offset.x;
                 context.shadowOffsetY = offset.y;
             }
-        },
-        _applyLineCap: function(shape) {
-            var lineCap = shape.getLineCap();
-            if(lineCap) {
-                this.context.lineCap = lineCap;
-            }
         }
     };
+    Kinetic.Global.extend(Kinetic.SceneCanvas, Kinetic.Canvas);
 
-    Kinetic.HitRenderer = function(context) {
+    Kinetic.HitCanvas = function(width, height) {
-        this.context = context;
+        Kinetic.Canvas.call(this, width, height);
     };
 
-    Kinetic.HitRenderer.prototype = {
+    Kinetic.HitCanvas.prototype = {
         _fill: function(shape) {
             var context = this.context;
             context.save();
@@ -259,12 +315,7 @@
                 context.stroke(context);
                 context.restore();
             }
-        },
-        _applyLineCap: function(shape) {
-            var lineCap = shape.getLineCap();
-            if(lineCap) {
-                this.context.lineCap = lineCap;
-            }
         }
     };
+    Kinetic.Global.extend(Kinetic.HitCanvas, Kinetic.Canvas);
 })();

src/Layer.js

@@ -38,9 +38,9 @@
             this.nodeType = 'Layer';
             this.beforeDrawFunc = undefined;
             this.afterDrawFunc = undefined;
-            this.canvas = new Kinetic.Canvas();
+            this.canvas = new Kinetic.SceneCanvas();
             this.canvas.getElement().style.position = 'absolute';
-            this.hitCanvas = new Kinetic.Canvas(0, 0, true);
+            this.hitCanvas = new Kinetic.HitCanvas(0, 0);
 
             // call super constructor
             Kinetic.Container.call(this, config);
@@ -231,10 +231,10 @@
              */
             if(!this.isVisible()) {
                 var stage = this.getStage();
-                canvas = new Kinetic.Canvas(stage.getWidth(), stage.getHeight());
+                canvas = new Kinetic.SceneCanvas(stage.getWidth(), stage.getHeight());
             }
             else if(config && config.width && config.height) {
-                canvas = new Kinetic.Canvas(config.width, config.height);
+                canvas = new Kinetic.SceneCanvas(config.width, config.height);
                 this.draw(canvas);
             }
             else {

src/Node.js

@@ -744,7 +744,7 @@
 
             //if width and height are defined, create new canvas to draw on, else reuse stage hit canvas
             if(config && config.width && config.height) {
-                canvas = new Kinetic.Canvas(config.width, config.height);
+                canvas = new Kinetic.SceneCanvas(config.width, config.height);
             }
             else {
                 canvas = this.getStage().bufferCanvas;

src/Shape.js

@@ -119,82 +119,6 @@
                 return 'UNKNOWN';
             }
         },
-        /**
-         * fill current path
-         * @name fill
-         * @methodOf Kinetic.Shape.prototype
-         */
-        fill: function(context) {
-            context.renderer._fill(this);
-        },
-        /**
-         * stroke current path
-         * @name stroke
-         * @methodOf Kinetic.Shape.prototype
-         */
-        stroke: function(context) {
-            context.renderer._stroke(this);
-        },
-        /**
-         * fill and stroke current path.  Aside from being a convenience method
-         *  which fills and strokes the current path with a single method, its main purpose is
-         *  to ensure that the shadow object is not applied to both the fill and stroke.  A shadow
-         *  will only be applied to either the fill or stroke.  Fill
-         *  is given priority over stroke.
-         * @name fillStroke
-         * @param {CanvasContext} context
-         * @methodOf Kinetic.Shape.prototype
-         */
-        fillStroke: function(context) {
-            context.renderer._fill(this);
-            context.renderer._stroke(this, this.getShadow() && this.getFill());
-        },
-        /**
-         * apply shadow
-         * @name applyShadow
-         * @param {CanvasContext} context
-         * @param {Function} func draw function
-         * @methodOf Kinetic.Shape.prototype
-         */
-        applyShadow: function(context, func) {
-            context.save();
-            context.renderer._applyShadow(this);
-            func();
-            context.restore();
-            func();
-        },
-        /**
-         * draw an image
-         * @name drawImage
-         * @methodOf Kinetic.Shape.prototype
-         * @param {CanvasContext} context
-         */
-        drawImage: function() {
-            var context = arguments[0];
-            context.save();
-            var a = Array.prototype.slice.call(arguments);
-
-            if(a.length === 6) {
-                context.drawImage(a[1], a[2], a[3], a[4], a[5]);
-            }
-            else if(a.length === 10) {
-                context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
-            }
-
-            context.restore();
-        },
-        _applyOpacity: function(context) {
-            var absOpacity = this.getAbsoluteOpacity();
-            if(absOpacity !== 1) {
-                context.globalAlpha = absOpacity;
-            }
-        },
-        _applyLineJoin: function(context) {
-            var lineJoin = this.getLineJoin();
-            if(lineJoin) {
-                context.lineJoin = lineJoin;
-            }
-        },
         /**
          * set shadow object
          * @name setShadow
@@ -306,20 +230,20 @@
                 }
 
                 context.save();
-                this._applyOpacity(context);
+                canvas._applyOpacity(this);
-                this._applyLineJoin(context);
+                canvas._applyLineJoin(this);
                 var len = family.length;
                 for(var n = 0; n < len; n++) {
                     var node = family[n], t = node.getTransform(), m = t.getMatrix();
                     context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
                 }
 
-                drawFunc.call(this, context);
+                drawFunc.call(this, canvas);
                 context.restore();
             }
         },
         drawScene: function() {
-            var attrs = this.attrs, drawFunc = attrs.drawFunc, context = this.getLayer().getCanvas().getContext();
+            var attrs = this.attrs, drawFunc = attrs.drawFunc, canvas = this.getLayer().getCanvas(), context = canvas.getContext();
 
             if(drawFunc && this.isVisible()) {
                 var stage = this.getStage(), family = [], parent = this.parent;
@@ -331,20 +255,20 @@
                 }
 
                 context.save();
-                this._applyOpacity(context);
+                canvas._applyOpacity(this);
-                this._applyLineJoin(context);
+                canvas._applyLineJoin(this);
                 var len = family.length;
                 for(var n = 0; n < len; n++) {
                     var node = family[n], t = node.getTransform(), m = t.getMatrix();
                     context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
                 }
 
-                drawFunc.call(this, context);
+                drawFunc.call(this, canvas);
                 context.restore();
             }
         },
         drawHit: function() {
-            var attrs = this.attrs, drawFunc = attrs.drawHitFunc || attrs.drawFunc, context = this.getLayer().hitCanvas.getContext();
+            var attrs = this.attrs, drawFunc = attrs.drawHitFunc || attrs.drawFunc, canvas = this.getLayer().hitCanvas, context = canvas.getContext();
 
             if(drawFunc && this.isVisible() && this.isListening()) {
                 var stage = this.getStage(), family = [], parent = this.parent;
@@ -356,14 +280,14 @@
                 }
 
                 context.save();
-                this._applyLineJoin(context);
+                canvas._applyLineJoin(this);
                 var len = family.length;
                 for(var n = 0; n < len; n++) {
                     var node = family[n], t = node.getTransform(), m = t.getMatrix();
                     context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
                 }
 
-                drawFunc.call(this, context);
+                drawFunc.call(this, canvas);
                 context.restore();
             }
         },

src/Stage.js

@@ -191,7 +191,7 @@
              */
             var width = config && config.width ? config.width : this.attrs.width;
             var height = config && config.height ? config.height : this.attrs.height;
-            var canvas = new Kinetic.Canvas(width, height);
+            var canvas = new Kinetic.SceneCanvas(width, height);
             var context = canvas.getContext();
             var layers = this.children;
 
@@ -569,8 +569,8 @@
             this.content.className = 'kineticjs-content';
             this.attrs.container.appendChild(this.content);
 
-            this.bufferCanvas = new Kinetic.Canvas();
+            this.bufferCanvas = new Kinetic.SceneCanvas();
-            this.hitCanvas = new Kinetic.Canvas(0, 0, true);
+            this.hitCanvas = new Kinetic.HitCanvas(0, 0);
 
             this._resizeDOM();
         },

src/shapes/Circle.js

@@ -21,11 +21,12 @@
             Kinetic.Shape.call(this, config);
             this._setDrawFuncs();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
+        	var context = canvas.getContext();
             context.beginPath();
             context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true);
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         },
         getWidth: function() {
             return this.getRadius() * 2;

src/shapes/Ellipse.js

@@ -24,8 +24,8 @@
             Kinetic.Shape.call(this, config);
             this._setDrawFuncs();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
-            var r = this.getRadius();
+        	var context = canvas.getContext(), r = this.getRadius();
             context.beginPath();
             context.save();
             if(r.x !== r.y) {
@@ -34,7 +34,7 @@
             context.arc(0, 0, r.x, 0, Math.PI * 2, true);
             context.restore();
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         },
         /**
          * set radius

src/shapes/Image.js

@@ -28,13 +28,13 @@
 
             this._syncSize();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
-            var width = this.getWidth(), height = this.getHeight(), params, that = this;
+            var width = this.getWidth(), height = this.getHeight(), params, that = this, context = canvas.getContext();
 
             context.beginPath();
             context.rect(0, 0, width, height);
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
 
             if(this.attrs.image) {
                 // if cropping
@@ -43,41 +43,40 @@
                     var cropY = this.attrs.crop.y || 0;
                     var cropWidth = this.attrs.crop.width;
                     var cropHeight = this.attrs.crop.height;
-                    params = [context, this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
+                    params = [this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
                 }
                 // no cropping
                 else {
-                    params = [context, this.attrs.image, 0, 0, width, height];
+                    params = [this.attrs.image, 0, 0, width, height];
                 }
 
                 if(this.getShadow()) {
-                    this.applyShadow(context, function() {
+                    canvas.applyShadow(this, function() {
-                        that.drawImage.apply(that, params);
+                        that._drawImage(context, params);
                     });
                 }
                 else {
-                    this.drawImage.apply(this, params);
+                    this._drawImage(context, params);
                 }
 
             }
 
         },
-        drawHitFunc: function(context) {
+        drawHitFunc: function(canvas) {
-            var width = this.getWidth(), height = this.getHeight(), imageHitRegion = this.imageHitRegion, appliedShadow = false;
+            var width = this.getWidth(), height = this.getHeight(), imageHitRegion = this.imageHitRegion, appliedShadow = false, context = canvas.getContext();
 
             if(imageHitRegion) {
-                this.drawImage(context, imageHitRegion, 0, 0, width, height);
+                context.drawImage(imageHitRegion, 0, 0, width, height);
-
                 context.beginPath();
                 context.rect(0, 0, width, height);
                 context.closePath();
-                this.stroke(context);
+                canvas.stroke(this);
             }
             else {
                 context.beginPath();
                 context.rect(0, 0, width, height);
                 context.closePath();
-                this.fillStroke(context);
+                canvas.fillStroke(this);
             }
         },
         /**
@@ -180,6 +179,14 @@
                     this.setHeight(this.attrs.image.height);
                 }
             }
+        },
+        _drawImage: function(context, a) {
+            if(a.length === 5) {
+                context.drawImage(a[0], a[1], a[2], a[3], a[4]);
+            }
+            else if(a.length === 9) {
+                context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
+            }
         }
     };
     Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);

src/shapes/Line.js

@@ -24,8 +24,8 @@
             Kinetic.Shape.call(this, config);
             this._setDrawFuncs();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
-            var lastPos = {}, points = this.getPoints(), length = points.length, dashArray = this.getDashArray(), dashLength = dashArray.length;
+            var lastPos = {}, points = this.getPoints(), length = points.length, dashArray = this.getDashArray(), dashLength = dashArray.length, context = canvas.getContext();
             context.beginPath();
             context.moveTo(points[0].x, points[0].y);
 
@@ -34,7 +34,7 @@
                 context.lineTo(point.x, point.y);
             }
 
-            this.stroke(context);
+            canvas.stroke(this);
         },
         /**
          * set points array

src/shapes/Path.js

@@ -25,8 +25,8 @@
                 that.dataArray = Kinetic.Path.parsePathData(that.attrs.data);
             });
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
-            var ca = this.dataArray;
+            var ca = this.dataArray, context = canvas.getContext();
             // context position
             context.beginPath();
             for(var n = 0; n < ca.length; n++) {
@@ -66,7 +66,7 @@
                         break;
                 }
             }
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         }
     };
     Kinetic.Global.extend(Kinetic.Path, Kinetic.Shape);

src/shapes/Polygon.js

@@ -21,14 +21,15 @@
             Kinetic.Shape.call(this, config);
             this._setDrawFuncs();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
+            var context = canvas.getContext(), points = this.getPoints(), length = points.length;
             context.beginPath();
-            context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
+            context.moveTo(points[0].x, points[0].y);
-            for(var n = 1; n < this.attrs.points.length; n++) {
+            for(var n = 1; n < length; n++) {
-                context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
+                context.lineTo(points[n].x, points[n].y);
             }
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         },
         /**
          * set points array

src/shapes/Rect.js

@@ -20,7 +20,8 @@
             Kinetic.Shape.call(this, config);
             this._setDrawFuncs();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
+        	var context = canvas.getContext();
             context.beginPath();
             var cornerRadius = this.getCornerRadius(), width = this.getWidth(), height = this.getHeight();
             if(cornerRadius === 0) {
@@ -40,7 +41,7 @@
                 context.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, Math.PI * 3 / 2, false);
             }
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         }
     };
 

src/shapes/RegularPolygon.js

@@ -22,17 +22,18 @@
             Kinetic.Shape.call(this, config);
             this._setDrawFuncs();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
+        	var context = canvas.getContext(), sides = this.attrs.sides, radius = this.attrs.radius;
             context.beginPath();
-            context.moveTo(0, 0 - this.attrs.radius);
+            context.moveTo(0, 0 - radius);
 
-            for(var n = 1; n < this.attrs.sides; n++) {
+            for(var n = 1; n < sides; n++) {
-                var x = this.attrs.radius * Math.sin(n * 2 * Math.PI / this.attrs.sides);
+                var x = radius * Math.sin(n * 2 * Math.PI / sides);
-                var y = -1 * this.attrs.radius * Math.cos(n * 2 * Math.PI / this.attrs.sides);
+                var y = -1 * radius * Math.cos(n * 2 * Math.PI / sides);
                 context.lineTo(x, y);
             }
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         }
     };
     Kinetic.Global.extend(Kinetic.RegularPolygon, Kinetic.Shape);

src/shapes/Sprite.js

@@ -28,24 +28,20 @@
                 that.setIndex(0);
             });
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
-            var anim = this.attrs.animation;
+            var anim = this.attrs.animation, index = this.attrs.index, f = this.attrs.animations[anim][index], context = canvas.getContext(), image = this.attrs.image;
-            var index = this.attrs.index;
-            var f = this.attrs.animations[anim][index];
 
-            if(this.attrs.image) {
+            if(image) {
-                this.drawImage(context, this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
+                context.drawImage(image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
             }
         },
-        drawHitFunc: function(context) {
+        drawHitFunc: function(canvas) {
-            var anim = this.attrs.animation;
+            var anim = this.attrs.animation, index = this.attrs.index, f = this.attrs.animations[anim][index], context = canvas.getContext();
-            var index = this.attrs.index;
-            var f = this.attrs.animations[anim][index];
 
             context.beginPath();
             context.rect(0, 0, f.width, f.height);
             context.closePath();
-            this.fill(context);
+            canvas.fill(this);
         },
         /**
          * start sprite animation

src/shapes/Star.js

@@ -23,19 +23,21 @@
             Kinetic.Shape.call(this, config);
             this._setDrawFuncs();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
+            var context = canvas.getContext(), innerRadius = this.attrs.innerRadius, outerRadius = this.attrs.outerRadius, numPoints = this.attrs.numPoints;
+
             context.beginPath();
             context.moveTo(0, 0 - this.attrs.outerRadius);
 
-            for(var n = 1; n < this.attrs.numPoints * 2; n++) {
+            for(var n = 1; n < numPoints * 2; n++) {
-                var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius;
+                var radius = n % 2 === 0 ? outerRadius : innerRadius;
-                var x = radius * Math.sin(n * Math.PI / this.attrs.numPoints);
+                var x = radius * Math.sin(n * Math.PI / numPoints);
-                var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.numPoints);
+                var y = -1 * radius * Math.cos(n * Math.PI / numPoints);
                 context.lineTo(x, y);
             }
             context.closePath();
 
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         }
     };
     Kinetic.Global.extend(Kinetic.Star, Kinetic.Shape);

src/shapes/Text.js

@@ -42,9 +42,10 @@
             }
             that._setTextData();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
+            var context = canvas.getContext();
             // draw rect
-            Kinetic.Rect.prototype.drawFunc.call(this, context);
+            Kinetic.Rect.prototype.drawFunc.call(this, canvas);
 
             // draw text
             var p = this.attrs.padding;
@@ -71,7 +72,7 @@
                     context.translate((this.getWidth() - this._getTextSize(text).width - p * 2) / 2, 0);
                 }
 
-                this.fillStrokeText(context, text);
+                canvas.fillStrokeText(this, text);
                 context.restore();
                 context.translate(0, lineHeightPx);
             }
@@ -133,44 +134,6 @@
                 height: parseInt(this.attrs.fontSize, 10)
             };
         },
-        fillText: function(context, text, skipShadow) {
-            var textFill = this.getTextFill(), textShadow = this.getTextShadow();
-            if(textFill) {
-                context.save();
-                if(!skipShadow && textShadow) {
-                    this._applyTextShadow(context);
-                }
-                context.fillStyle = textFill;
-                context.fillText(text, 0, 0);
-                context.restore();
-
-                if(!skipShadow && textShadow && textShadow.opacity) {
-                    this.fillText(context, text, true);
-                }
-            }
-        },
-        strokeText: function(context, text, skipShadow) {
-            var textStroke = this.getTextStroke(), textStrokeWidth = this.getTextStrokeWidth(), textShadow = this.getTextShadow();
-            if(textStroke || textStrokeWidth) {
-                context.save();
-                if(!skipShadow && textShadow) {
-                    this._applyTextShadow(context);
-                }
-
-                context.lineWidth = textStrokeWidth || 2;
-                context.strokeStyle = textStroke || 'black';
-                context.strokeText(text, 0, 0);
-                context.restore();
-
-                if(!skipShadow && textShadow && textShadow.opacity) {
-                    this.strokeText(context, text, true);
-                }
-            }
-        },
-        fillStrokeText: function(context, text) {
-            this.fillText(context, text);
-            this.strokeText(context, text, this.getTextShadow() && this.getTextFill());
-        },
         /**
          * set text shadow object
          * @name setTextShadow
@@ -253,11 +216,55 @@
                 row++;
             }
             this.textArr = arr;
-        },
+        }
-        _applyTextShadow: function(context) {
+    };
-            var textShadow = this.getTextShadow();
+    Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
+
+    /*
+     * extend canvas renderers
+     */
+    var fillText = function(shape, text, skipShadow) {
+        var textFill = shape.getTextFill(), textShadow = shape.getTextShadow(), context = this.context;
+        if(textFill) {
+            context.save();
+            if(!skipShadow && textShadow) {
+                this._applyTextShadow(shape);
+            }
+            context.fillStyle = textFill;
+            context.fillText(text, 0, 0);
+            context.restore();
+
+            if(!skipShadow && textShadow && textShadow.opacity) {
+                this.fillText(shape, text, true);
+            }
+        }
+    };
+    var strokeText = function(shape, text, skipShadow) {
+        var textStroke = shape.getTextStroke(), textStrokeWidth = shape.getTextStrokeWidth(), textShadow = shape.getTextShadow(), context = this.context;
+        if(textStroke || textStrokeWidth) {
+            context.save();
+            if(!skipShadow && textShadow) {
+                this._applyTextShadow(shape);
+            }
+
+            context.lineWidth = textStrokeWidth || 2;
+            context.strokeStyle = textStroke || 'black';
+            context.strokeText(text, 0, 0);
+            context.restore();
+
+            if(!skipShadow && textShadow && textShadow.opacity) {
+                this.strokeText(shape, text, true);
+            }
+        }
+    };
+    var fillStrokeText = function(shape, text) {
+        this.fillText(shape, text);
+        this.strokeText(shape, text, shape.getTextShadow() && shape.getTextFill());
+    };
+    var _applyTextShadow = function(shape) {
+        var textShadow = shape.getTextShadow(), context = this.context;
         if(textShadow) {
-                var aa = this.getAbsoluteOpacity();
+            var aa = shape.getAbsoluteOpacity();
             // defaults
             var color = textShadow.color || 'black';
             var blur = textShadow.blur || 5;
@@ -274,9 +281,18 @@
             context.shadowOffsetX = offset.x;
             context.shadowOffsetY = offset.y;
         }
-        }
     };
-    Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
+    // scene canvases
+    Kinetic.SceneCanvas.prototype.fillText = fillText;
+    Kinetic.SceneCanvas.prototype.strokeText = strokeText;
+    Kinetic.SceneCanvas.prototype.fillStrokeText = fillStrokeText;
+    Kinetic.SceneCanvas.prototype._applyTextShadow = _applyTextShadow;
+
+    // hit canvases
+    Kinetic.HitCanvas.prototype.fillText = fillText;
+    Kinetic.HitCanvas.prototype.strokeText = strokeText;
+    Kinetic.HitCanvas.prototype.fillStrokeText = fillStrokeText;
+    Kinetic.HitCanvas.prototype._applyTextShadow = _applyTextShadow;
 
     // add getters setters
     Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight']);

src/shapes/TextPath.js

@@ -41,8 +41,8 @@
             }
             that._setTextData();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
-            var charArr = this.charArr;
+            var charArr = this.charArr, context = canvas.getContext();
 
             context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
             context.textBaseline = 'middle';
@@ -50,15 +50,7 @@
             context.save();
 
             var glyphInfo = this.glyphInfo;
-
-            var appliedShadow = this.appliedShadow;
             for(var i = 0; i < glyphInfo.length; i++) {
-                /*
-                 * need to reset appliedShadow flag so that shadows
-                 * are appropriately applied to each line of text
-                 */
-                this.appliedShadow = appliedShadow;
-
                 context.save();
 
                 var p0 = glyphInfo[i].p0;
@@ -68,7 +60,7 @@
                 context.translate(p0.x, p0.y);
                 context.rotate(glyphInfo[i].rotation);
 
-                this.fillStrokeText(context, glyphInfo[i].text);
+                canvas.fillStrokeText(this, glyphInfo[i].text);
 
                 context.restore();
 

src/shapes/Wedge.js

@@ -23,12 +23,13 @@
             Kinetic.Shape.call(this, config);
             this._setDrawFuncs();
         },
-        drawFunc: function(context) {
+        drawFunc: function(canvas) {
+            var context = canvas.getContext();
             context.beginPath();
             context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
             context.lineTo(0, 0);
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         },
         setAngleDeg: function(deg) {
             this.setAngle(Kinetic.Type._degToRad(deg));

tests/js/functionalTests.js

@@ -38,7 +38,6 @@ Test.Modules.DD = {
         circle.on('dragend', function() {
             dragEnd = true;
         });
-
         warn(layer.toDataURL() === dataUrls['drag circle before'], 'start data url is incorrect');
         /*
         * simulate drag and drop
@@ -869,12 +868,13 @@ Test.Modules['HIT FUNCS'] = {
             strokeWidth: 4,
             fill: 'red',
             stroke: 'black',
-            drawHitFunc: function(context) {
+            drawHitFunc: function(canvas) {
+                var context = canvas.getContext()
                 context.beginPath();
                 context.arc(0, 0, this.getRadius() + 100, 0, Math.PI * 2, true);
                 context.closePath();
-                this.fill(context);
+                canvas.fill(this);
-                this.stroke(context);
+                canvas.stroke(this);
             }
         });
 
@@ -895,7 +895,6 @@ Test.Modules['HIT FUNCS'] = {
         circle.on('mouseout', function() {
             mouseouts++;
         });
-
         // move mouse far outside circle
         stage._mousemove({
             clientX: 113,
@@ -923,12 +922,13 @@ Test.Modules['HIT FUNCS'] = {
 
         // set drawBufferFunc with setter
 
-        circle.setDrawHitFunc(function(context) {
+        circle.setDrawHitFunc(function(canvas) {
+            var context = canvas.getContext();
             context.beginPath();
             context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
             context.closePath();
-            this.fill(context);
+            canvas.fill(this);
-            this.stroke(context);
+            canvas.stroke(this);
         });
 
         layer.drawHit();

tests/js/unit/containerTests.js

@@ -625,8 +625,11 @@ Test.Modules.CONTAINER = {
         test(group.get('Rect').length === 1, 'group should have 1 rects');
         test(group.get('Circle').length === 1, 'gropu should have 1 circles');
 
+		//console.log(dataUrls['node shape type selector']);
+
         stage.toDataURL({
             callback: function(dataUrl) {
+            	//console.log(dataUrl)
                 warn(dataUrl === dataUrls['node shape type selector'], 'problem with node and shape type selector render.');
             }
         });

tests/js/unit/nodeTests.js

@@ -278,6 +278,7 @@ Test.Modules.NODE = {
             draggable: true,
             name: 'myGroup'
         });
+
         var rect = new Kinetic.Rect({
             x: 0,
             y: 50,
@@ -741,7 +742,6 @@ Test.Modules.NODE = {
             width: 500,
             height: 300,
             callback: function(imageObj) {
-
                 //document.body.appendChild(imageObj)
                 test(Kinetic.Type._isElement(imageObj), 'shape toImage() should be an image object');
 
@@ -2008,14 +2008,15 @@ Test.Modules.NODE = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
 
-        var drawTriangle = function(context) {
+        var drawTriangle = function(canvas) {
+        	var context = canvas.getContext();
             context.beginPath();
             context.moveTo(200, 50);
             context.lineTo(420, 80);
             context.quadraticCurveTo(300, 100, 260, 170);
             context.closePath();
-            this.fill(context);
+            canvas.fill(this);
-            this.stroke(context);
+            canvas.stroke(this);
         };
         var triangle = new Kinetic.Shape({
             drawFunc: drawTriangle,
@@ -2051,14 +2052,15 @@ Test.Modules.NODE = {
 
     },
     'load stage with custom shape using json': function(containerId) {
-        var drawTriangle = function(context) {
+        var drawTriangle = function(canvas) {
+        	var context = canvas.getContext();
             context.beginPath();
             context.moveTo(200, 50);
             context.lineTo(420, 80);
             context.quadraticCurveTo(300, 100, 260, 170);
             context.closePath();
-            this.fill(context);
+            canvas.fill(this);
-            this.stroke(context);
+            canvas.stroke(this);
         };
         var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
 

tests/js/unit/shapeTests.js

@@ -53,20 +53,21 @@ Test.Modules.SHAPE = {
         });
         var layer = new Kinetic.Layer();
 
-        var drawTriangle = function(context) {
+        var drawTriangle = function(canvas) {
+        	var context = canvas.getContext();
             context.beginPath();
             context.moveTo(200, 50);
             context.lineTo(420, 80);
             context.quadraticCurveTo(300, 100, 260, 170);
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
 
             context.beginPath();
             context.moveTo(300, 150);
             context.lineTo(520, 180);
             context.quadraticCurveTo(400, 200, 360, 270);
             context.closePath();
-            this.fillStroke(context);
+            canvas.fillStroke(this);
         };
         var triangle = new Kinetic.Shape({
             drawFunc: drawTriangle,
@@ -98,14 +99,15 @@ Test.Modules.SHAPE = {
         });
         var layer = new Kinetic.Layer();
         var shape = new Kinetic.Shape({
-            drawFunc: function(context) {
+            drawFunc: function(canvas) {
+            	var context = canvas.getContext();
                 context.beginPath();
                 context.moveTo(0, 0);
                 context.lineTo(100, 0);
                 context.lineTo(100, 100);
                 context.closePath();
-                this.fill(context);
+                canvas.fill(this);
-                this.stroke(context);
+                canvas.stroke(this);
             },
             x: 200,
             y: 100,
@@ -125,14 +127,15 @@ Test.Modules.SHAPE = {
         });
         var layer = new Kinetic.Layer();
         var shape = new Kinetic.Shape({
-            drawFunc: function(context) {
+            drawFunc: function(canvas) {
+            	var context = canvas.getContext();
                 context.beginPath();
                 context.moveTo(0, 0);
                 context.lineTo(100, 0);
                 context.lineTo(100, 100);
                 context.closePath();
-                this.fill(context);
+                canvas.fill(this);
-                this.stroke(context);
+                canvas.stroke(this);
             },
             x: 200,
             y: 100,
@@ -141,14 +144,15 @@ Test.Modules.SHAPE = {
             strokeWidth: 5
         });
 
-        shape.setDrawFunc(function(context) {
+        shape.setDrawFunc(function(canvas) {
+        	var context = canvas.getContext();
             context.beginPath();
             context.moveTo(0, 0);
             context.lineTo(200, 0);
             context.lineTo(200, 100);
             context.closePath();
-            this.fill(context);
+            canvas.fill(this);
-            this.stroke(context);
+            canvas.stroke(this);
         });
         var rect = new Kinetic.Rect({
             x: 10,
@@ -161,14 +165,15 @@ Test.Modules.SHAPE = {
             draggable: true
         });
 
-        rect.setDrawFunc(function(context) {
+        rect.setDrawFunc(function(canvas) {
+        	var context = canvas.getContext();
             context.beginPath();
             context.moveTo(0, 0);
             context.lineTo(200, 0);
             context.lineTo(200, 100);
             context.closePath();
-            this.fill(context);
+            canvas.fill(this);
-            this.stroke(context);
+            canvas.stroke(this);
         });
 
         layer.add(shape);