playing around with active color

javascript/src/Plugins/qfq.fabric.js

@@ -9,6 +9,7 @@ $(function () {
     var saveTwo = false;
     var saveThree = false;
     var bgColor = '#fff';
+    var activeColor = {red: 0, green: 0, blue: 0, opacity: 1};
     var bgOpacity = 1;
     var fgColor = '#000';
     var borderColor = '#000';
@@ -87,6 +88,14 @@ $(function () {
         }
     }
 
+    function getActiveRGBA(changedOpacity) {
+        var opacity = activeColor.opacity;
+        if (changedOpacity) {
+            opacity = changedOpacity;
+        }
+        return "rgba(" + activeColor.red + "," + activeColor.green + "," + activeColor.blue + "," + opacity + ")";
+    }
+
     function deleteActiveGroup() {
         if (canvas.getActiveGroup()) {
             canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
@@ -101,6 +110,8 @@ $(function () {
         var pointer = canvas.getPointer(o.e);
         origX = pointer.x;
         origY = pointer.y;
+        var colorFill = getActiveRGBA(0.4);
+        var colorBorder = getActiveRGBA(1);
         pointer = canvas.getPointer(o.e);
         var rect = new fabric.Rect({
             left: origX,
@@ -110,9 +121,9 @@ $(function () {
             width: pointer.x-origX,
             height: pointer.y-origY,
             angle: 0,
-            fill: 'rgba(255,0,0,0.4)',
+            fill: colorFill,
             strokeWidth: borderSize,
-            stroke: 'rgba(255, 0, 0, 1)',
+            stroke: colorBorder,
             selectable: true,
             borderScaleFactor: 0,
             hasControls: false
@@ -165,7 +176,8 @@ $(function () {
         adjustDefaultPosition();
     }
 
-    function setBrush(color, brushSize) {
+    function setBrush(brushSize) {
+        var color = getActiveRGBA();
         canvas.freeDrawingBrush.color = color;
         if (!brushSize) {
             brushSize = 2;
@@ -317,19 +329,35 @@ $(function () {
     });
 
     $("#draw-black").on("click", function() {
-        setBrush('rgba(0, 0, 0, 0.8)');
+        activeColor.red = 0;
+        activeColor.green = 0;
+        activeColor.blue = 0;
+        activeColor.opacity = 0.8;
+        setBrush();
     });
 
     $("#draw-red").on("click", function() {
-        setBrush('rgba(255, 0, 0, 0.8)');
+        activeColor.red = 255;
+        activeColor.green = 0;
+        activeColor.blue = 0;
+        activeColor.opacity = 0.8;
+        setBrush();
     });
 
     $("#draw-blue").on("click", function() {
-        setBrush('rgba(0, 0, 255, 0.8)');
+        activeColor.red = 0;
+        activeColor.green = 204;
+        activeColor.blue = 255;
+        activeColor.opacity = 0.8;
+        setBrush();
     });
 
     $("#highlight-yellow").on("click", function() {
-        setBrush('rgba(255, 204, 0, 0.4)', 12);
+        activeColor.red = 255;
+        activeColor.green = 204;
+        activeColor.blue = 0;
+        activeColor.opacity = 0.4;
+        setBrush(12);
     });
 
     $("#text-yellow-border").on("click", function() {