works as before.

javascript/src/Plugins/qfq.fabric.js

 /**
  * Created by bbaer on 5/5/17.
  */
+
 $(function () {
-    var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true });
+    var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true, stateful: true });
     var imageURL = "../mockup/mockData/Scan2a.jpeg";
     var saveOne = false;
     var saveTwo = false;
     var saveThree = false;
     fabric.Object.prototype.transparentCorners = false;
 
+    canvas.on('after:render', function(){ this.calcOffset(); });
+
     function setBackground(imagePath) {
         fabric.Image.fromURL(imageURL, function(img) {
             img.set({
@@ -23,8 +26,10 @@ $(function () {
 
     function deactivateDrawing() {
         canvas.isDrawingMode = false;
+        canvas.renderAll();
         $("#drawing-mode").removeClass("btn-primary");
         $("#drawing-mode").addClass("btn-default");
+        console.log(JSON.stringify(canvas));
     }
 
     setBackground(imageURL);

mockup/fabric.html

@@ -68,106 +68,8 @@
 <script src="../js/jqx-all.js"></script>
 <script src="../js/EventEmitter.min.js"></script>
 <script src="../js/qfq.debug.js"></script>
-<script src="../js/qfq.fabric.js"></script>
-<script type="text/javascript">
-    /**
-     * Created by bbaer on 5/5/17.
-     */
-    $(function () {
-        var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true });
-        var imageURL = "../mockup/mockData/Scan2a.jpeg";
-        var saveOne = false;
-        var saveTwo = false;
-        var saveThree = false;
-        fabric.Object.prototype.transparentCorners = false;
-
-        function setBackground(imagePath) {
-            fabric.Image.fromURL(imageURL, function(img) {
-                img.set({
-                    width: canvas.width,
-                    height: canvas.height,
-                    originX: 'left',
-                    originY: 'top'
-                });
-                canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-            });
-        }
-
-        function deactivateDrawing() {
-            canvas.isDrawingMode = false;
-            $("#drawing-mode").removeClass("btn-primary");
-            $("#drawing-mode").addClass("btn-default");
-        }
-
-        setBackground(imageURL);
-
-
-        $("#clear-canvas").on( "click", function() {
-            canvas.clear();
-            setBackground(imageURL);
-        });
-
-        $("#drawing-mode").on( "click", function() {
-            canvas.isDrawingMode = !canvas.isDrawingMode;
-            console.log("Button pressed");
-            if (canvas.isDrawingMode) {
-                $(this).removeClass("btn-default");
-                $(this).addClass("btn-primary");
-            }
-            else {
-                $(this).removeClass("btn-primary");
-                $(this).addClass("btn-default");
-            }
-        });
-
-        $("#add-text").on("click", function() {
-            var text = new fabric.IText('type your text here', { left: 100, top: 100, editable: true});
-            canvas.add(text);
-            deactivateDrawing();
-        });
+<script src="../javascript/src/Plugins/qfq.fabric.js"></script>
 
-        $("#save1").on("click", function() {
-            if (!saveOne) {
-                saveOne = canvas.toJSON();
-            } else {
-                canvas.loadFromJSON(saveOne);
-            }
-        });
-
-        $("#save2").on("click", function() {
-            if (!saveTwo) {
-                saveTwo = canvas.toJSON();
-            } else {
-                canvas.loadFromJSON(saveTwo);
-            }
-        });
-
-        $("#save3").on("click", function() {
-            if (!saveThree) {
-                saveThree = canvas.toJSON();
-            } else {
-                canvas.loadFromJSON(saveThree);
-            }
-        });
-
-        $("#export-svg").on("click", function() {
-            var svg = canvas.toSVG();
-            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());
-                }
-            }
-        });
-    });
-</script>
 <script type="text/javascript">
     $(function () {
         var qfqPage = new QfqNS.QfqPage({