diff --git a/xray.html b/xray.html
index 70dc78b..de3f6ef 100644
--- a/xray.html
+++ b/xray.html
@@ -34,6 +34,10 @@
+
diff --git a/xray.js b/xray.js
index 3306c0e..ff9787c 100644
--- a/xray.js
+++ b/xray.js
@@ -11,6 +11,8 @@ let softness = 25;
let width;
let height;
+let paintMode = false;
+
let scale;
document.addEventListener("DOMContentLoaded", e => {
@@ -63,10 +65,30 @@ document.addEventListener("DOMContentLoaded", e => {
const overlay = document.querySelector("#overlay");
+ document.addEventListener("mousedown", e => {
+ let x = e.clientX - e.target.getBoundingClientRect().x;
+ let y = e.clientY - e.target.getBoundingClientRect().y;
+ updateOverlay([[x,y]], e.buttons % 2 != 0);
+ });
+
document.addEventListener("mousemove", e => {
let x = e.clientX - e.target.getBoundingClientRect().x;
let y = e.clientY - e.target.getBoundingClientRect().y;
- updateOverlay([[x,y]]);
+ updateOverlay([[x,y]], e.buttons % 2 != 0);
+ });
+
+ document.addEventListener("touchstart", e => {
+ let offsetX = e.target.getBoundingClientRect().x;
+ let offsetY = e.target.getBoundingClientRect().y;
+
+ let touches = [];
+
+ for (let i=0; i < e.touches.length; i++) {
+ let x = e.touches[i].clientX - offsetX;
+ let y = e.touches[i].clientY - offsetY;
+ touches.push([x,y]);
+ }
+ updateOverlay(touches, true);
});
document.addEventListener("touchmove", e => {
@@ -80,7 +102,7 @@ document.addEventListener("DOMContentLoaded", e => {
let y = e.touches[i].clientY - offsetY;
touches.push([x,y]);
}
- updateOverlay(touches);
+ updateOverlay(touches, true);
});
document.querySelector("#radius-slider").addEventListener("input", e => {
@@ -227,6 +249,10 @@ document.addEventListener("DOMContentLoaded", e => {
cancelFullScreen.call(doc);
}
});
+
+ document.querySelector("#paint-mode").addEventListener("change", e => {
+ paintMode = e.target.checked;
+ });
});
function load() {
@@ -305,7 +331,7 @@ function setup() {
console.log("Done");
}
-function updateOverlay(points) {
+function updateOverlay(points, clicked) {
const overlay = document.querySelector("#overlay");
const overlayResized = document.querySelector("#overlay-resized");
@@ -322,20 +348,25 @@ function updateOverlay(points) {
overlayCtx.save();
overlayCtx.globalCompositeOperation = "source-over";
- overlayCtx.clearRect(0, 0, w, h);
- points.forEach(point => {
- const [x,y] = point;
- overlayCtx.beginPath();
- overlayCtx.ellipse(x, y, radius * scale, radius * scale, 0, 0, 2 * Math.PI);
-
- const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, Math.floor(radius * scale));
- gradient.addColorStop((100-softness)/100, '#000000FF');
- gradient.addColorStop(1, '#00000000');
- overlayCtx.fillStyle = gradient;
+ if (!paintMode)
+ overlayCtx.clearRect(0, 0, w, h);
+
+ if (!paintMode || clicked) {
+ points.forEach(point => {
+ const [x,y] = point;
+ overlayCtx.beginPath();
+ overlayCtx.ellipse(x, y, radius * scale, radius * scale, 0, 0, 2 * Math.PI);
+
+ const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, Math.floor(radius * scale));
+ gradient.addColorStop((100-softness)/100, '#000000FF');
+ gradient.addColorStop(1, '#00000000');
+ overlayCtx.fillStyle = gradient;
+
+ overlayCtx.fill();
+ })
+ }
- overlayCtx.fill();
- })
overlayCtx.globalCompositeOperation = "source-in";