set alpha value for Transparent clickthrough window
bmatusiak opened this issue · 2 comments
I would like to create a drawing tracing app to overlay on top of MSPaint or any image drawing editor..
the problem is,, alpha needs to be 0 for current clickthrough https://nwjs.readthedocs.io/en/latest/For%20Users/Advanced/Transparent%20Window/
i would like the opposite, i want to have clickthrough windows, for anything where value is not 1. not clickthrough if its 1/solid. if it has any transparent alpha other then 1/solid, then its clickthrough
this would allow me to overlay anything on a canvas to trace in another drawing app. or to create overlay HUDs that don't block the mouse
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.
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>