HTML canvas element contact detection

I am trying to make a website with static effect and I’ve come across the canvas. While learning about it, I wanted the font colours to change when that specific element is over the stroke.

I’m sorry if I am making no sense, I will show you an example with code and picture.

Below picture is a front page of my website but since it’s a picture, it’s hard to tell what I am talking about but the feature I want is so that when the sine graph goes above”Welcome”, the “Welcome” text changes to black automatically so it gives more of a static feel to the website.

Here’s my code

window.onload = () => {
    const canvas = document.querySelector(".canvas");
    const ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    window.addEventListener("resize", () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });

    const wave = {
        y: canvas.height / 2 + 100,
        length: 0.0015,
        amplitude: 70,
        frequency: 0.01,
    };

    let increment = wave.frequency;

    const drawWave = () => {
        ctx.beginPath();
        ctx.moveTo(0, canvas.height / 2);
        ctx.fillStyle = "rgba(0,0,0,0.91)";
        for (let i = 0; i < canvas.width; i++) {
            ctx.lineTo(i, wave.y + Math.sin(i * wave.length + increment) * wave.amplitude);
        }

        increment += wave.frequency;
        ctx.lineTo(canvas.width, 0);
        ctx.lineTo(0, 0);
        ctx.strokeStyle = "black";
        ctx.stroke();
        ctx.fill();
    };

    const animate = () => {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawWave();
    };

    animate();
    window.addEventListener("click", (e) => {
        console.log(e);
        console.log(e.x, e.y);
    });
};

body {
    margin: 0;
    padding: 0;
}
.intro {
    position: absolute;
    width: 100%;
    height: 100vh;
}
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
h1 {
    text-align: center;
    color: white;
}
canvas {
    position: absolute;
    z-index: -1;
}

p {
    color: white;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test</title>
        <link rel="stylesheet" href="css/app.css" />
        <script src="test.js" defer></script>
    </head>
    <body>
        <div>
            <div class="intro">
                <div class="content">
                    <h1>Welcome</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ratione eveniet ipsam, doloremque sequi rem. Ab accusamus laboriosam distinctio commodi nemo, excepturi ipsam
                        aperiam fugiat voluptatibus veritatis asperiores assumenda delectus.
                    </p>
                </div>
            </div>
            <canvas class="canvas"></canvas>
        </div>
        <script type="text/javascript" src="dat.gui.min.js"></script>
    </body>
</html>

Any help or suggestions are appreciated. I have to say, this canvas thing is not easy to get things going :/

Answer

You could try using css blend modes

This should work:

body {
  background: white;
}

h1 {
    color: white;
    mix-blend-mode: difference;
}

p {
    color: white;
    mix-blend-mode: difference;
}

edit: mix-blend-mode instead of blend-mode

Advertisement

Answer