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>
This commit is contained in:
Victor Seiji Hariki 2022-11-20 23:29:50 -03:00
parent 217b89efef
commit d6435abf2e
2 changed files with 15 additions and 21 deletions

View file

@ -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,6 +177,10 @@ button.tool:hover {
position: absolute;
}
.maskPaintCanvas {
filter: opacity(40%);
}
.strokeText {
-webkit-text-stroke: 1px #888;
font-size: 150%;

View file

@ -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';