I would like to create a drawing tracing app to overlay on top of MSPaint or any image

current workaround, <div class="highlight highlight-text-html-basic notranslate po

set alpha value for Transparent clickthrough window about nw.js HOT 2 OPEN

bmatusiak commented on July 30, 2024

set alpha value for Transparent clickthrough window

from nw.js.

Comments (2)

bmatusiak commented on July 30, 2024

my only current option is to, set the alpha to 0 at the pixel where the current mouse position is on the canvas. and its buggy to do it in this way

however this does not work with elements like TEXT elements.

from nw.js.

bmatusiak commented on July 30, 2024

current workaround,

<html>
<head>
</head>
<body>
    <script>
        window.onload = () => {
            var newgui = require('nw.gui');
            var newWindow = newgui.Window.open('other.html', {
                position: 'center',
                width: 600,
                height: 800,
                frame: false,
                transparent: true,
                always_on_top: true
            }, function (win) {
                win.show();
            });

        }
    </script>
</body>
</html>

<html>
<head>
    <style>
        html,
        body {
            background-color: rgba(0, 255, 0, 0);
            padding: 0;
            margin: 0;
            border: 0;
            width: 100%;
            height: 100%;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="javascript: start();">
    <canvas id="viewCanvas"></canvas>
    <script>
        function start() {
            var mousePOS;
            var canvas = document.getElementById("viewCanvas");
            canvas.addEventListener('mousemove', function (event) {
                const rect = canvas.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;
                mousePOS = { x, y };
            });
            function draw() {
                canvas.width = document.body.clientWidth;
                canvas.height = document.body.clientHeight;
                const ctx = canvas.getContext("2d");
                ctx.globalAlpha = 0.5;
                ctx.clearRect(0, 0, canvas.width, canvas.height); 
                ctx.beginPath();
                ctx.fillStyle = "rgb(0,0,0)";
                ctx.rect(0, 0, canvas.width, canvas.height);
                ctx.fill();
                if (mousePOS) {
                    var blockSize = 1;
                    ctx.clearRect(mousePOS.x - blockSize, mousePOS.y - blockSize, blockSize * 2, blockSize * 2); // clear canvas
                }
                window.requestAnimationFrame(draw);
            }
            window.requestAnimationFrame(draw);
        }
    </script>
</body>
</html>