New features:

Text boxes,
Intiuitive Rectangle Handling
Colors
Panning the image

javascript/src/Plugins/qfq.fabric.js

@@ -3,11 +3,23 @@
  */
 
 $(function () {
-    var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true, stateful: true });
+    var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true, stateful: true, enableRetinaScaling: true });
     var imageURL = "../mockup/mockData/Scan2a.jpeg";
     var saveOne = false;
     var saveTwo = false;
     var saveThree = false;
+    var bgColor = '#fff';
+    var bgOpacity = 1;
+    var fgColor = '#000';
+    var borderColor = '#000';
+    var textSize = 16;
+    var addPositionLeft = 20;
+    var addPositionTop = 20;
+    var panning = false;
+    var moveMode = false;
+    var drawRectangleMode = false;
+    var isDown, origX, origY;
+
     fabric.Object.prototype.transparentCorners = false;
 
     canvas.on('after:render', function(){ this.calcOffset(); });
@@ -18,20 +30,150 @@ $(function () {
                 width: canvas.width,
                 height: canvas.height,
                 originX: 'left',
-                originY: 'top'
+                originY: 'top',
+                lockUniScaling: true,
+                centeredScaling: true
             });
             canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
         });
     }
 
+    function deactivateToggles() {
+        deactivateDrawing();
+        deactivateMove();
+    }
+
     function deactivateDrawing() {
         canvas.isDrawingMode = false;
         canvas.renderAll();
         $("#drawing-mode").removeClass("btn-primary");
         $("#drawing-mode").addClass("btn-default");
-        console.log(JSON.stringify(canvas));
     }
 
+    function deactivateMove() {
+        moveMode = false;
+        canvas.renderAll();
+        $("#move-mode").removeClass("btn-primary");
+        $("#move-mode").addClass("btn-default");
+    }
+
+    function deactivatePanning() {
+        panning = false;
+    }
+
+    function deactivateRectangleDrawing() {
+        drawRectangleMode = false;
+        isDown = false;
+        var rect = canvas.getActiveObject();
+        rect.hasControls = true;
+        canvas.setActiveObject(rect);
+        canvas.renderAll();
+    }
+
+    function adjustDefaultPosition() {
+        addPositionLeft += 20;
+        addPositionTop += 20;
+    }
+
+    function panImage(e) {
+        if (panning && e && e.e) {
+            var delta = new fabric.Point(e.e.movementX, e.e.movementY);
+            canvas.relativePan(delta);
+        }
+    }
+
+    function deleteActiveGroup() {
+        if (canvas.getActiveGroup()) {
+            canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
+            canvas.discardActiveGroup().renderAll();
+        } else {
+            canvas.remove(canvas.getActiveObject());
+        }
+    }
+
+    function freeDrawRectangleStart(o) {
+        isDown = true;
+        var pointer = canvas.getPointer(o.e);
+        origX = pointer.x;
+        origY = pointer.y;
+        pointer = canvas.getPointer(o.e);
+        var rect = new fabric.Rect({
+            left: origX,
+            top: origY,
+            originX: 'left',
+            originY: 'top',
+            width: pointer.x-origX,
+            height: pointer.y-origY,
+            angle: 0,
+            fill: 'rgba(255,0,0,0.5)',
+            selectable: true,
+            hasControls: false
+        });
+        canvas.add(rect);
+        canvas.setActiveObject(rect);
+    }
+
+    function resizeRectangle(o) {
+        if (!isDown) return;
+        var rect = canvas.getActiveObject();
+        var pointer = canvas.getPointer(o.e);
+
+        if(origX>pointer.x){
+            rect.set({ left: Math.abs(pointer.x) });
+        }
+        if(origY>pointer.y){
+            rect.set({ top: Math.abs(pointer.y) });
+        }
+
+        rect.set({ width: Math.abs(origX - pointer.x) });
+        rect.set({ height: Math.abs(origY - pointer.y) });
+
+
+        canvas.renderAll();
+    }
+
+    // Custom Mouse / Touch Events on Canvas
+
+    canvas.on('mouse:up', function (e) {
+        if (moveMode) {
+            deactivatePanning();
+        }
+
+        if (drawRectangleMode) {
+            deactivateRectangleDrawing();
+        }
+    });
+
+    canvas.on('mouse:out', function (e) {
+        if (moveMode) {
+            deactivatePanning();
+        }
+    });
+
+    canvas.on('mouse:down', function (e) {
+        if (moveMode) {
+            panning = true;
+        }
+        if (drawRectangleMode) {
+            freeDrawRectangleStart(e);
+        }
+    });
+
+    canvas.on('mouse:move', function(e) {
+        if (moveMode) {
+            panImage(e);
+        }
+        if (drawRectangleMode) {
+            resizeRectangle(e);
+        }
+    });
+
+    canvas.on('key:up', function(e) {
+        if(e.keyCode == 46) {
+            deleteActiveGroup();
+        }
+    });
+
     setBackground(imageURL);
 
 
@@ -40,12 +182,40 @@ $(function () {
         setBackground(imageURL);
     });
 
+    $("#text-bg-submit").on("click", function() {
+        deactivateToggles();
+        var userText = $("#text-user-value").val();
+        console.log(userText);
+        var text = new fabric.Text(userText, {
+            fontSize: textSize,
+            color: '#000',
+            left: 10,
+            top: 10
+        });
+        var rect = new fabric.Rect();
+        rect.set({
+            width: text.width + 20,
+            height: text.height + 20,
+            fill: bgColor,
+            opacity: bgOpacity
+        });
+        var group = new fabric.Group([rect, text], {
+            left: addPositionLeft,
+            top: addPositionTop
+        });
+        canvas.add(group);
+        canvas.setActiveGroup(group);
+        adjustDefaultPosition();
+        $("#text-user-value").val('');
+    });
+
     $("#drawing-mode").on( "click", function() {
         canvas.isDrawingMode = !canvas.isDrawingMode;
         console.log("Button pressed");
         if (canvas.isDrawingMode) {
             $(this).removeClass("btn-default");
             $(this).addClass("btn-primary");
+            deactivateMove();
         }
         else {
             $(this).removeClass("btn-primary");
@@ -53,12 +223,32 @@ $(function () {
         }
     });
 
+    $("#move-mode").on("click", function() {
+        canvas.selection = !canvas.selection;
+        if (!canvas.selection) {
+            $(this).removeClass("btn-default");
+            $(this).addClass("btn-primary");
+            deactivateDrawing();
+            moveMode = true;
+        }
+        else {
+            $(this).removeClass("btn-primary");
+            $(this).addClass("btn-default");
+            moveMode = false;
+        }
+    });
+
     $("#add-text").on("click", function() {
-        var text = new fabric.IText('type your text here', { left: 100, top: 100, editable: true});
+        var text = new fabric.IText('type your text here', { fontSize: 20, left: 100, top: 100, editable: true});
         canvas.add(text);
         deactivateDrawing();
     });
 
+    $("#add-rect").on("click", function() {
+        drawRectangleMode = true;
+        deactivateDrawing();
+    });
+
     $("#save1").on("click", function() {
         if (!saveOne) {
             saveOne = canvas.toJSON();
@@ -85,18 +275,30 @@ $(function () {
 
     $("#export-svg").on("click", function() {
         var svg = canvas.toSVG();
+        var png = canvas.toDataURL('png');
         console.log(svg);
-       $("#target-svg").html(svg);
-    });
-
-    $('html').keyup(function(e) {
-       if(e.keyCode == 46) {
-           if (canvas.getActiveGroup()) {
-               canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
-               canvas.discardActiveGroup().renderAll();
-           } else {
-               canvas.remove(canvas.getActiveObject());
-           }
-       }
+        $("#target-svg").html(svg);
+        $("#target-png").attr("src", png);
+
+    });
+
+    $("#text-no-bg").on("click", function() {
+        bgOpacity = 0;
+    });
+
+    $("#text-yellow-bg").on("click", function() {
+        bgOpacity = 1;
+        bgColor = '#ffcc00'
+    });
+
+    $("#text-white-bg").on("click", function() {
+        bgOpacity = 1;
+        bgColor = '#fff'
+    });
+
+    $("#text-yellow-border").on("click", function() {
+        borderColor = '#2b2200';
+        bgOpacity = 1;
+        bgColor = "#ffcc00";
     });
 });
\ No newline at end of file

less/qfq-bs.css.less

@@ -158,6 +158,41 @@ i.@{spinner_class} {
   padding-top: 7px;
 }
 
+// Fabric Plugin classes
+.fabric-text {
+  width: 100%;
+  height: 80px;
+}
+
+#text-bg-submit {
+  background-color: #ccc;
+  height: 24px;
+  border: none;
+}
+
+.text-bg-toggle {
+  width: 24px;
+  height: 24px;
+  background-size: contain;
+  border: none;
+}
+
+#text-no-bg {
+  background-image: url("../icons/no_bg.png");
+}
+
+#text-white-bg {
+  background-image: url("../icons/white_bg.png");
+}
+
+#text-yellow-bg {
+  background-image: url("../icons/yellow_bg.png");
+}
+
+#text-yellow-border {
+  background-image: url("../icons/yellow_border.png");
+}
+
 // typeAhead Input: Default Bootstrap column width
 .twitter-typeahead {
   display: block !important;

mockup/fabric.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="../css/jqx.base.css">
     <link rel="stylesheet" href="../css/jqx.bootstrap.css">
-    <link rel="stylesheet" href="../css/qfq-bs.css">
+    <link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
     <title>Input Mode Switcher</title>
 
 
@@ -38,14 +38,32 @@
     </div>
     <div class="row">
         <div class="col-md-4">
-            <canvas id="c" class="qfq-canvas" width="600" height="800" style="border: 1px solid;"></canvas>
-        </div>
-        <div class="col-md-1">
             <div class="form-group">
                 <button class="btn btn-primary" id="drawing-mode"><span class="glyphicon glyphicon-pencil"></span></button>
                 <button class="btn btn-danger" id="clear-canvas"><span class="glyphicon glyphicon-trash"></span></button>
                 <button class="btn btn-default" id="add-text"><span class="glyphicon glyphicon-text-height"></span></button>
+                <button class="btn btn-default" id="add-rect"><span class="glyphicon glyphicon-stop"></span></button>
+                <button class="btn btn-default" id="move-mode"><span class="glyphicon glyphicon-move"></span></button>
+            </div>
+            <div class="text-insert">
+                <textarea class="fabric-text" placeholder="Remember, be nice!" id="text-user-value"></textarea>
+                <div class="text-options">
+                    <button type="button" class="text-bg-toggle" id="text-no-bg"></button>
+                    <button type="button" class="text-bg-toggle" id="text-white-bg"></button>
+                    <button type="button" class="text-bg-toggle" id="text-yellow-bg"></button>
+                    <button type="button" class="text-bg-toggle" id="text-yellow-border"></button>
+                    <button type="button" id="text-bg-submit">Add Text</button>
+                </div>
             </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-4">
+            <div id="canvas-container">
+                <canvas id="c" class="qfq-canvas" width="600" height="800" style="border: 1px solid;"></canvas>
+            </div>
+        </div>
+        <div class="col-md-1">
             <div class="form-group">
                 <button class="btn btn-default" id="save1">1</button>
                 <button class="btn btn-default" id="save2">2</button>
@@ -57,6 +75,7 @@
         </div>
         <div class="col-md-7">
             <svg id="target-svg" width="600" height="800"></svg>
+            <img id="target-png" width="600" height="800"></img>
         </div>
     </div>
 </div>