solid color mask and migration to new input method

reimplements mask using the new input lib, makes mask use a solid color
(masks shouldn't become darker the more you draw over itself) and the
mask layer is now rendered with the alpha using css.

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/index.css

@@ -12,23 +12,23 @@
 }
 
 .maskPaintCanvas {
-    border: 3px dotted #993355C0
+    border: 3px dotted #993355c0;
 }
 
 .overlayCanvas {
-    border: 1px solid #F00;
+    border: 1px solid #f00;
 }
 
 .tempCanvas {
-    border: 3px dotted #007AFFC0;
+    border: 3px dotted #007affc0;
 }
 
 .targetCanvas {
-    border: 2px dashed #0F0;
+    border: 2px dashed #0f0;
 }
 
 .canvas {
-    border: 2px dotted #00F;
+    border: 2px dotted #00f;
 }
 
 .mainHSplit {
@@ -45,7 +45,6 @@
     grid-template-rows: 1fr;
     grid-column-gap: 5px;
     grid-row-gap: 5px;
-
 }
 
 #infoContainer {
@@ -53,10 +52,9 @@
     width: 250px;
     height: auto;
     z-index: 999;
-
 }
-#draggable{
-    cursor:move
+#draggable {
+    cursor: move;
 }
 
 #DraggableTitleBar {
@@ -153,7 +151,6 @@ button.tool:hover {
     cursor: auto;
 }
 
-
 .canvasHolder {
     position: relative;
     width: 2560px;
@@ -180,8 +177,12 @@ button.tool:hover {
     position: absolute;
 }
 
+.maskPaintCanvas {
+    filter: opacity(40%);
+}
+
 .strokeText {
     -webkit-text-stroke: 1px #888;
     font-size: 150%;
     color: #000;
-}
+}

js/index.js

@@ -430,6 +430,9 @@ function mouseMove(evt) {
     }
 }
 
+/**
+ * Mask implementation
+ */
 mouse.listen.canvas.onmousemove.on((evn) => {
     if (paintMode) {
         // draw big translucent red blob cursor
@@ -456,16 +459,6 @@ mouse.listen.canvas.left.onpaint.on((evn) => {
 
 mouse.listen.canvas.right.onpaint.on((evn) => {
     if (paintMode) {
-        ovCtx.beginPath();
-        ovCtx.arc(evn.x, evn.y, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
-        ovCtx.fillStyle = '#00FF00';
-        ovCtx.fill();
-
-        ovCtx.beginPath();
-        ovCtx.arc(evn.px, evn.py, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
-        ovCtx.fillStyle = '#0000FF';
-        ovCtx.fill();
-
         maskPaintCtx.globalCompositeOperation = 'destination-out';
         maskPaintCtx.strokeStyle = '#FFFFFFFF';