Kann ich Wörter vor meiner Leinwand HTML hinzufügen? ⇐ CSS

[Guest]

Ich versuche eine Site zu erstellen, auf der der Benutzer auf dem Bildschirm nach Wörtern suchen kann, indem ich auf einen weißen Hintergrund ziehe. Die Wörter sind in weiß und unsichtbar, bis der Cursor in Schwarz über sie zeichnet und die weiße Umrisse des Wortes enthüllt. .
Gibt es eine Möglichkeit, dieses Problem zu beheben?

Code: Select all

const canvas = document.getElementById('drawing-board');
const ctx = canvas.getContext('2d');

const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;
canvas.width = window.innerWidth - canvasOffsetX;
canvas.height = window.innerHeight - canvasOffsetY;

let isPainting = true;
let lineWidth = 100;
let startX;
let startY;
const colour = "black";

ctx.strokeStyle = "black"
ctx.fillStyle= "transparent";
ctx.font = "italic bold 15pt Tahoma";
ctx.strokeText("StackOverFlow",100,240);
ctx.strokeStyle = colour;

const draw = (e) => {
if(!isPainting) {
return;
}
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';

ctx.lineTo(e.clientX - canvasOffsetX, e.clientY);
ctx.stroke();
}
canvas.addEventListener('mousedown', (e) => {
isPainting = false;
startX = e.clientX;
startY = e.clientY;
});

canvas.addEventListener('mouseup', e => {
isPainting = true;
ctx.stroke();
ctx.beginPath();
});
canvas.addEventListener('mousemove', draw);< /code>