diff --git a/Tests/misc/rectangle utils 1.js b/Tests/misc/rectangle utils 1.js
index c3724d294..7b5ad1f09 100644
--- a/Tests/misc/rectangle utils 1.js	
+++ b/Tests/misc/rectangle utils 1.js	
@@ -1,10 +1,52 @@
 (function() {
-    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
 
-    function init() {
+    var rects = [],
+        rect, lastCreated;
+
+    function create() {
+        // Create a rect first.
+        spawnRect(64, 32, 64, 64);
+
+        // Add a rectangle on each touch or click.
+        game.input.onTap.add(function() {
+            spawnRect(lastCreated.x + 12, lastCreated.y + 12, 64, 64);
+        });
+    }
+    function update() {
         // body...
     }
-    function create() {
+    function render() {
+        var context = Phaser.DebugUtils.context;
 
+        // Render rectangles.
+        context.strokeStyle = '#fff';
+        // context.fillStyle = '#fff';
+        context.lineWidth = 2;
+        for (var i = 0, len = rects.length; i < len; i++) {
+            rect = rects[i];
+            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        }
+
+        // Render info.
+        context.fillStyle = '#fff';
+        context.lineWidth = 0;
+        context.fillText('Tap or click to clone a new rectangle.', 480, 128);
+    }
+    function spawnRect(x, y, w, h) {
+        // If a rect already created, clone it to create a new one instead
+        // of allocating.
+        if (lastCreated) {
+            rect = Phaser.RectangleUtils.clone(lastCreated);
+            // Offset the newly created rectangle.
+            rect.x += 24;
+            rect.y += 24;
+            // Now the last created is this one.
+            lastCreated = rect;
+        }
+        else {
+            lastCreated = new Phaser.Rectangle(x, y, w, h);
+        }
+        rects.push(lastCreated);
     }
 })();
diff --git a/Tests/misc/rectangle utils 1.ts b/Tests/misc/rectangle utils 1.ts
new file mode 100644
index 000000000..9c63681fe
--- /dev/null
+++ b/Tests/misc/rectangle utils 1.ts	
@@ -0,0 +1,53 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
+
+    var rects: Phaser.Rectangle[] = [],
+        rect: Phaser.Rectangle,
+        lastCreated: Phaser.Rectangle;
+
+    function create() {
+        // Create a rect first.
+        spawnRect(64, 32, 64, 64);
+
+        // Add a rectangle on each touch or click.
+        game.input.onTap.add(function() {
+            spawnRect(lastCreated.x + 12, lastCreated.y + 12, 64, 64);
+        });
+    }
+    function update() {
+        // body...
+    }
+    function render() {
+        var context: CanvasRenderingContext2D = Phaser.DebugUtils.context;
+
+        // Render rectangles.
+        context.strokeStyle = '#fff';
+        // context.fillStyle = '#fff';
+        context.lineWidth = 2;
+        for (var i = 0, len = rects.length; i < len; i++) {
+            rect = rects[i];
+            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        }
+
+        // Render info.
+        context.fillStyle = '#fff';
+        context.lineWidth = 0;
+        context.fillText('Tap or click to clone a new rectangle.', 480, 128);
+    }
+    function spawnRect(x, y, w, h) {
+        // If a rect already created, clone it to create a new one instead
+        // of allocating.
+        if (lastCreated) {
+            rect = Phaser.RectangleUtils.clone(lastCreated);
+            // Offset the newly created rectangle.
+            rect.x += 24;
+            rect.y += 24;
+            // Now the last created is this one.
+            lastCreated = rect;
+        }
+        else {
+            lastCreated = new Phaser.Rectangle(x, y, w, h);
+        }
+        rects.push(lastCreated);
+    }
+})();
diff --git a/Tests/misc/rectangle utils 2.js b/Tests/misc/rectangle utils 2.js
new file mode 100644
index 000000000..8ee15235f
--- /dev/null
+++ b/Tests/misc/rectangle utils 2.js	
@@ -0,0 +1,123 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
+
+    var rect, renderList = [];
+    var leftHandler, rightHandler, topHandler, bottomHandler;
+    var onDragLeft = false,
+        onDragRight = false,
+        onDragTop = false,
+        onDragBottom = false;
+    var lastPos = {x: 0, y: 0};
+
+    function create() {
+        // Rectangle to be dragged and scaled.
+        rect = new Phaser.Rectangle(game.stage.centerX - 160, game.stage.centerY - 120,
+            320, 240);
+        // Handler rectangles for dragging scaling.
+        leftHandler = new Phaser.Rectangle(game.stage.centerX - 160 - 4, game.stage.centerY - 4,
+            8, 8);
+        rightHandler = new Phaser.Rectangle(game.stage.centerX + 160 - 4, game.stage.centerY - 4,
+            8, 8);
+        topHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY - 120 - 4,
+            8, 8);
+        bottomHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY + 120 - 4,
+            8, 8);
+        // Add all the rectangles to the render list.
+        renderList.push(rect,
+            leftHandler, rightHandler, topHandler, bottomHandler);
+
+        // Touch or press mouse button on any handler to start inflating rectangle.
+        game.input.onDown.add(function(pointer) {
+            if (Phaser.RectangleUtils.contains(leftHandler, pointer.position.x, pointer.position.y)) {
+                onDragLeft = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(rightHandler, pointer.position.x, pointer.position.y)) {
+                onDragRight = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(topHandler, pointer.position.x, pointer.position.y)) {
+                onDragTop = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(bottomHandler, pointer.position.x, pointer.position.y)) {
+                onDragBottom = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+        });
+        // Stop dragging handlers when up.
+        game.input.onUp.add(function() {
+            onDragLeft = onDragRight = onDragTop = onDragBottom = false;
+        });
+    }
+    function update() {
+        var offset = {x: 0, y: 0};
+        // Calc offset from last frame (previous update).
+        if (onDragLeft) {
+            offset.x = -game.input.x + lastPos.x;
+        }
+        else if (onDragRight) {
+            offset.x = game.input.x - lastPos.x;
+        }
+        else if (onDragTop) {
+            offset.y = -game.input.y + lastPos.y;
+        }
+        else if (onDragBottom) {
+            offset.y = game.input.y - lastPos.y;
+        }
+        // Update last position.
+        lastPos.x = game.input.x;
+        lastPos.y = game.input.y;
+
+        // Change rect's size and also the 4 handlers' position.
+        Phaser.RectangleUtils.inflate(rect, offset.x, offset.y);
+        leftHandler.x = rect.x - leftHandler.width / 2;
+        rightHandler.x = rect.x + rect.width - rightHandler.width / 2;
+        topHandler.y = rect.y - topHandler.height / 2;
+        bottomHandler.y = rect.y + rect.height - bottomHandler.height / 2;
+    }
+    function render() {
+        var context = Phaser.DebugUtils.context;
+
+        // Render rectangles.
+        context.strokeStyle = '#fff';
+        context.fillStyle = '#000';
+        context.lineWidth = 4;
+        for (var i = 0, len = renderList.length; i < len; i++) {
+            context.strokeRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
+            context.fillRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
+        }
+
+        // Render info.
+        context.fillStyle = '#fff';
+        context.lineWidth = 0;
+
+        // Draw offset from origin point when drawing.
+        var origin = game.input.activePointer.positionDown,
+            currPos = game.input.activePointer.position;
+        if (onDragLeft) {
+            context.fillText('dx: ' + (currPos.x - origin.x), leftHandler.x + 16, leftHandler.y - 20);
+            context.fillText('dy: 0', leftHandler.x + 16, leftHandler.y - 8);
+        }
+        else if (onDragRight) {
+            context.fillText('dx: ' + (currPos.x - origin.x), rightHandler.x + 16, rightHandler.y - 20);
+            context.fillText('dx: 0', rightHandler.x + 16, rightHandler.y - 8);
+        }
+        else if (onDragTop) {
+            context.fillText('dy: 0', topHandler.x + 16, topHandler.y - 20);
+            context.fillText('dy: ' + (currPos.y - origin.y), topHandler.x + 16, topHandler.y - 8);
+        }
+        else if (onDragBottom) {
+            context.fillText('dy: 0', bottomHandler.x + 16, bottomHandler.y - 20);
+            context.fillText('dy: ' + (currPos.y - origin.y), bottomHandler.x + 16, bottomHandler.y - 8);
+        }
+
+        context.fillText('Drag handlers to scale the rectangle!', 280, 96);
+        context.fillText('Notice that the scaling does not move the rectangle\'s center!', 220, 508);
+        context.fillText('You can also get same effect by using "Sprite" and its origin property.', 196, 520);
+    }
+})();
diff --git a/Tests/misc/rectangle utils 2.ts b/Tests/misc/rectangle utils 2.ts
new file mode 100644
index 000000000..95ebb2c7c
--- /dev/null
+++ b/Tests/misc/rectangle utils 2.ts	
@@ -0,0 +1,130 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
+
+    var rect: Phaser.Rectangle,
+        renderList: Phaser.Rectangle[] = [];
+
+    var leftHandler: Phaser.Rectangle,
+        rightHandler: Phaser.Rectangle,
+        topHandler: Phaser.Rectangle,
+        bottomHandler: Phaser.Rectangle;
+
+    var onDragLeft: Boolean = false,
+        onDragRight: Boolean = false,
+        onDragTop: Boolean = false,
+        onDragBottom: Boolean = false;
+
+    var lastPos = {x: 0, y: 0};
+
+    function create() {
+        // Rectangle to be dragged and scaled.
+        rect = new Phaser.Rectangle(game.stage.centerX - 160, game.stage.centerY - 120,
+            320, 240);
+        // Handler rectangles for dragging scaling.
+        leftHandler = new Phaser.Rectangle(game.stage.centerX - 160 - 4, game.stage.centerY - 4,
+            8, 8);
+        rightHandler = new Phaser.Rectangle(game.stage.centerX + 160 - 4, game.stage.centerY - 4,
+            8, 8);
+        topHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY - 120 - 4,
+            8, 8);
+        bottomHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY + 120 - 4,
+            8, 8);
+        // Add all the rectangles to the render list.
+        renderList.push(rect,
+            leftHandler, rightHandler, topHandler, bottomHandler);
+
+        // Touch or press mouse button on any handler to start inflating rectangle.
+        game.input.onDown.add(function(pointer) {
+            if (Phaser.RectangleUtils.contains(leftHandler, pointer.position.x, pointer.position.y)) {
+                onDragLeft = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(rightHandler, pointer.position.x, pointer.position.y)) {
+                onDragRight = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(topHandler, pointer.position.x, pointer.position.y)) {
+                onDragTop = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(bottomHandler, pointer.position.x, pointer.position.y)) {
+                onDragBottom = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+        });
+        // Stop dragging handlers when up.
+        game.input.onUp.add(function() {
+            onDragLeft = onDragRight = onDragTop = onDragBottom = false;
+        });
+    }
+    function update() {
+        var offset = {x: 0, y: 0};
+        // Calc offset from last frame (previous update).
+        if (onDragLeft) {
+            offset.x = -game.input.x + lastPos.x;
+        }
+        else if (onDragRight) {
+            offset.x = game.input.x - lastPos.x;
+        }
+        else if (onDragTop) {
+            offset.y = -game.input.y + lastPos.y;
+        }
+        else if (onDragBottom) {
+            offset.y = game.input.y - lastPos.y;
+        }
+        // Update last position.
+        lastPos.x = game.input.x;
+        lastPos.y = game.input.y;
+
+        // Change rect's size and also the 4 handlers' position.
+        Phaser.RectangleUtils.inflate(rect, offset.x, offset.y);
+        leftHandler.x = rect.x - leftHandler.width / 2;
+        rightHandler.x = rect.x + rect.width - rightHandler.width / 2;
+        topHandler.y = rect.y - topHandler.height / 2;
+        bottomHandler.y = rect.y + rect.height - bottomHandler.height / 2;
+    }
+    function render() {
+        var context: CanvasRenderingContext2D = Phaser.DebugUtils.context;
+
+        // Render rectangles.
+        context.strokeStyle = '#fff';
+        context.fillStyle = '#000';
+        context.lineWidth = 4;
+        for (var i = 0, len = renderList.length; i < len; i++) {
+            context.strokeRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
+            context.fillRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
+        }
+
+        // Render info.
+        context.fillStyle = '#fff';
+        context.lineWidth = 0;
+
+        // Draw offset from origin point when drawing.
+        var origin: Phaser.Vec2 = game.input.activePointer.positionDown,
+            currPos: Phaser.Vec2 = game.input.activePointer.position;
+        if (onDragLeft) {
+            context.fillText('dx: ' + (currPos.x - origin.x), leftHandler.x + 16, leftHandler.y - 20);
+            context.fillText('dy: 0', leftHandler.x + 16, leftHandler.y - 8);
+        }
+        else if (onDragRight) {
+            context.fillText('dx: ' + (currPos.x - origin.x), rightHandler.x + 16, rightHandler.y - 20);
+            context.fillText('dx: 0', rightHandler.x + 16, rightHandler.y - 8);
+        }
+        else if (onDragTop) {
+            context.fillText('dy: 0', topHandler.x + 16, topHandler.y - 20);
+            context.fillText('dy: ' + (currPos.y - origin.y), topHandler.x + 16, topHandler.y - 8);
+        }
+        else if (onDragBottom) {
+            context.fillText('dy: 0', bottomHandler.x + 16, bottomHandler.y - 20);
+            context.fillText('dy: ' + (currPos.y - origin.y), bottomHandler.x + 16, bottomHandler.y - 8);
+        }
+
+        context.fillText('Drag handlers to scale the rectangle!', 280, 96);
+        context.fillText('Notice that the scaling does not move the rectangle\'s center!', 220, 508);
+        context.fillText('You can also get same effect by using "Sprite" and its origin property.', 196, 520);
+    }
+})();