Brush opacity

web/page/bspaint.js

@@ -363,7 +363,7 @@ function createDrawArea(canvas = blankCanvas(),initialTitle="Image") {
         if (!layer.visible) continue;        
         canvas.ctx.globalAlpha = layer.opacity;
         canvas.ctx.globalCompositeOperation=layer.compositeOperation;
-        if (this.isDrawing && layer===this.activeLayer) {
+        if (this.isDrawing && layer===this.activeLayer) {          
           canvas.ctx.drawImage(activeOperationCanvas,0,0);          
         } else {
           layer.draw(canvas.ctx);
@@ -456,11 +456,15 @@ function createDrawArea(canvas = blankCanvas(),initialTitle="Image") {
           ctx.restore();
           const unitRange=this.strokeCoordinates.map(({x,y})=>({x:x/canvas.width,y:y/canvas.height}));
 
+          ctx.save();
+          const opacity = $("#brush_opacity input[type=range]").val()/100;
+          ctx.globalAlpha=opacity;
           const strokes = this.strokeModifier([unitRange])          
           for (const unitStroke of strokes) {
             const stroke=unitStroke.map(({x,y})=>({x:x*canvas.width,y:y*canvas.height}));
             tip.tool.drawOperation(activeOperationCanvas.ctx,tip,stroke)
           }
+          ctx.restore();
           if (this.activeLayer.mask) {
             const ctx=activeOperationCanvas.ctx;
             ctx.save();
@@ -830,7 +834,8 @@ function initPaint(){
   });
   
 
-
+  $("input.percentage").on("change",processPercentageInput);
+  $("input.percentage~input").on("input",processPercentageRange);
   window.test1=createDrawArea(undefined,"Image A");
   window.test2=createDrawArea(undefined,"Image B");
   test1.setPosition(30,60) ;
@@ -1507,8 +1512,28 @@ document.addEventListener('paste', async (event) => {
   }
 });
 
+function processPercentageInput(e) {
+  let element = e.currentTarget;
+  if (!element.hasOwnProperty("lastGoodValue")) element.lastGoodValue=100;
+  let range = element.parentElement.querySelector("input[type=range]");
+  let value = parseFloat(element.value);
+  if (Number.isNaN(value)) {
+    value=element.lastGoodValue;
+  }
+  value=Math.floor(value);
+  if (range) {
+    range.value=value;
+    value=range.value;
+  }
+  element.value=`${value}%`;
+}
 
-
+function processPercentageRange(e) {
+  const range = e.currentTarget;
+  console.log(range.value);
+  const input = range.parentNode.querySelector(".percentage")
+  input.value = ""+range.value+"%";
+}
 
 hotkeys["CTRL_Z"] = _=>{activePic?.undo()}
 hotkeys["CTRL_SHIFT_Z"] = _=>{activePic?.redo()}

web/page/index.html

@@ -39,6 +39,12 @@
       </div>
     </div>
     <div id="palette" class="noselect">
+      <div id="brush_opacity">
+      <label for="opacity">opacity</label>
+      <input class="percentage" type="text" value="100%">
+      <br>
+      <input name="opacity" type="range" min="0" max="100" value="100" step="1">
+      </div>
       <input id="foreground" type="color" value="#000000">
       <input id="background" type="color" value="#ff00ff">
     </div>

web/page/style.css

@@ -252,6 +252,24 @@ input[type="color"] {
   border:none;
   outline:none;
 }
+
+#brush_opacity {
+  width:100%;
+  padding:0;
+  margin:0;
+  position:relative;
+}
+#brush_opacity input {
+  width:100%;
+  box-sizing:border-box;
+}
+#brush_opacity label{
+  font-size:small;
+}
+#brush_opacity output{
+  font-size:small;
+}
+
 #foreground {
   position: absolute;
   bottom : 32px;