How do I get the canvas to show behind my HTML so my animated cursor will move over the screen?

Question

I want the canvas to show behind the website not over it. I have tried using z index and that does not work. I want to be able to see my actual website while moving the cursor over things. So I need the cursor to show on the website. It just blocks out my whole section. How can I get this to work correctly?

const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelectorAll('.nav__link')


navToggle.addEventListener('click', () => {
    document.body.classList.toggle('nav-open');
});

navLinks.forEach(link => {
    link.addEventListener('click', () => {
        document.body.classList.remove('nav-open');
    })
})

// Canvas

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let spots = [];
let hue = 0;

const mouse = {
    x: undefined,
    y: undefined
}

canvas.addEventListener('mousemove', function (event) {
    mouse.x = event.x;
    mouse.y = event.y;
    for (let i = 0; i < 3; i++) {
        spots.push(new Particle());
    }
});

class Particle {
    constructor() {
        this.x = mouse.x;
        this.y = mouse.y;
        this.size = Math.random() * 2 + 0.1;
        this.speedX = Math.random() * 2 - 1;
        this.speedY = Math.random() * 2 - 1;
        this.color = 'hsl(' + hue + ', 100%, 50%)';
    }
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.size > 0.1) this.size -= 0.03;
    }
    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}
function handleParticle() {
    for (let i = 0; i < spots.length; i++) {
        spots[i].update();
        spots[i].draw();
        for (let j = i; j < spots.length; j++) {
            const dx = spots[i].x - spots[j].x;
            const dy = spots[i].y - spots[j].y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < 90) {
                ctx.beginPath();
                ctx.strokeStyle = spots[i].color;
                ctx.lineWidth = spots[i].size / 10;
                ctx.moveTo(spots[i].x, spots[i].y);
                ctx.lineTo(spots[j].x, spots[j].y);
                ctx.stroke();
            }
        }
        if (spots[i].size <= 0.3) {
            spots.splice(i, 1); i--;
        }
    }
}
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    handleParticle();
    hue++;
    requestAnimationFrame(animate);
}
window.addEventListener('resize', function () {
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    init();
})
window.addEventListener('mouseout', function () {
    mouse.x = undefined;
    mouse.y = undefined;
})
animate()

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

body {
    position: relative
}


/* Custom Properties */

:root {
    --ff-primary: 'Source Sans Pro', sans-serif;
    --ff-secondary: 'Source Code Pro', monospace;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-light: #fff;
    --clr-dark: #303030;
    --clr-accent: #16e0bd;

    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;

    --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
        0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}

@media (min-width: 800px) {
    :root {
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.125rem;
    }
}

/* General styles */

html {
    scroll-behavior: smooth;
}


body {
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
}

#canvas {
    width: 100%;
    height: 100%;
    border: 2px solid red;
    z-index: -1;
}

/* #canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
} */

section {
    padding: 5em 2em;
}

img {
    display: block;
    max-width: 100%;
}

strong {
    font-weight: var(--fw-bold)
}

:focus {
    outline: 3px solid var(--clr-accent);
    outline-offset: 3px;
}

/* Buttons */

.btn {
    display: inline-block;
    padding: .5em 2em;
    background: var(--clr-accent);
    color: var(--clr-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;
    margin: 15px;
    border-radius: 8px;
    border-style: groove;
    border-width: 3px;
    border-color: var(--clr-accent);
}

.btn2 {
    display: inline-block;
    padding: .4em 1em;
    background: var(--clr-accent);
    color: var(--clr-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;
    margin: 15px;
    border-radius: 8px;
    border-style: groove;
    border-width: 3px;
    border-color: var(--clr-accent);
}

.btn2:hover {
    transform: scale(1.2);
}

.btn:hover {
    transform: scale(1.2);
}

/* Typography */

h1,
h2,
h3 {
    line-height: 1;
    margin: 0;
}

h1 {
    font-size: var(--fs-h1)
}

h2 {
    font-size: var(--fs-h2)
}

h3 {
    font-size: var(--fs-h3)
}

.section__title {
    margin-bottom: .25em;
}


.section__title--intro {
    font-weight: var(--fw-reg);
}

.section__title--intro strong {
    display: block;
}

.section__subtitle {
    margin: 0;
    font-size: var(--fs-h3);
}

.section__subtitle--intro,
.section__subtitle--about {
    background: var(--clr-accent);
    padding: .25em 1em;
    font-family: var(--ff-secondary);
    margin-bottom: 1em;
}

.section__subtitle--work {
    color: var(--clr-accent);
    font-weight: var(--fw-bold);
    margin-bottom: 2em;
}


/* header */

header {
    display: flex;
    justify-content: space-between;
    padding: 1em;
}


.logo {
    max-width: 150px;
    z-index: 100;
}

.nav {
    position: fixed;
    background: var(--clr-dark);
    color: var(--clr-light);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;

    transform: translateX(100%);
    transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}

.nav__list {
    list-style: none;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav__link {
    color: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h2);
    text-decoration: none;
}

.nav__link:hover {
    color: var(--clr-accent);
}

.nav-toggle {
    padding: .5em;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: absolute;
    right: 1em;
    top: 1em;
    z-index: 1000;
}

.nav-open .nav {
    transform: translateX(0);
}

.nav-open .nav-toggle {
    position: fixed;
}

.nav-open .hamburger {
    transform: rotate(.625turn);
}

.nav-open .hamburger::before {
    transform: rotate(90deg) translateX(-6px);
}

.nav-open .hamburger::after {
    opacity: 0;
}

.hamburger {
    display: block;
    position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    background: var(--clr-accent);
    width: 2em;
    height: 3px;
    border-radius: 1em;
    transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}

.hamburger::before {
    top: 6px;
}

.hamburger::after {
    bottom: 6px;
}


/*  Intro section  */

.intro {
    position: relative;
}

.intro__img {
    box-shadow: var(--bs);
    border-radius: 8px;
}

.section__subtitle--intro {
    display: inline-block;
}

@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas:
            "img title"
            "img subtitle";
        grid-template-columns: min-content max-content;
    }

    .intro__img {
        grid-area: img;
        min-width: 300px;
        position: relative;
        z-index: 2;
    }

    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 1.5em);
    }
}



/*  My services section  */

.my-services {
    background-color: var(--clr-dark);
    color: var(--clr-light);
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.section__title--services {
    position: relative;
}

.section__title--services::after {
    content: '';
    display: block;
    width: 2em;
    height: 1px;
    margin: 0.5em auto 1em;
    background: var(--clr-light);
    opacity: 0.25;
}

.service {
    max-width: 500px;
    margin: 0 auto;
}

.service p:hover {
    color: var(--clr-accent);
}


.service p {
    font-family: var(--ff-secondary);
    font-size: 15px;
}

@media (min-width: 800px) {
    .services {
        display: flex;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .service+.service {
        margin-left: 2em;
    }
}

.about-me {
    max-width: 1000px;
    margin: 0 auto;
    margin-top: -3%;
    margin-bottom: -3%;
}

.about-me__body {
    font-family: var(--ff-secondary);
    text-align: center;
}

.about-me__img {
    box-shadow: var(--bs);
    border-radius: 8px;
}

@media(min-width: 600px) {
    .about-me {
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-template-areas:
            "title img"
            "subtitle img"
            "text img";
        grid-column-gap: 2em;
    }

    .section__title--about {
        grid-area: title;
    }

    .section__subtitle--about {
        grid-column: 1 / -1;
        grid-row: 2;
        position: relative;
        left: -1em;
        width: calc(100% + 2em);
        padding-left: 1em;
        padding-right: calc(200px + 4em);
    }

    .about-me__img {
        grid-area: img;
        position: relative;
        z-index: 2;
    }
}

/* My Work */

.my-work {
    background-color: var(--clr-dark);
    color: var(--clr-light);
    text-align: center;
    padding-top: 30px;
    padding-bottom: 40px;
}

.portfolio {
    display: grid;
    margin-left: 50px;
    column-gap: 20px;
    row-gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


@media(min-width: 200px) {
    .portfolio__item {
        text-align: center;
        padding-right: 50%;

    }
}


@media(min-width: 250px) {
    .portfolio__item {
        text-align: center;
    }
}

@media(min-width: 350px) {
    .portfolio__item {
        text-align: center;
        padding-right: 60px
    }
}


.item-header1,
.item-header2,
.item-header3,
.item-header4,
.item-header5,
.item-header6 {
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
}

.item-header1:hover,
.item-header2:hover,
.item-header3:hover,
.item-header4:hover,
.item-header5:hover,
.item-header6:hover {
    color: var(--clr-accent);
}

.text1,
.text2,
.text3 {
    opacity: 0;
    position: absolute;
    text-align: center;
    font-weight: var(--fw-bold);
    margin-top: 10%;
    border: solid 2px;
    border-radius: 50%;
    padding: 20px;
    border-color: aqua;
    background-color: var(--clr-dark);
    width: 130px;
    height: 130px;
    font-size: 20px;
    color: var(--clr-accent);

}

.text4,
.text5,
.text6 {
    opacity: 0;
    position: absolute;
    text-align: center;
    font-weight: var(--fw-bold);
    margin-top: 40%;
    border: solid 2px;
    border-radius: 50%;
    padding: 20px;
    border-color: aqua;
    background-color: var(--clr-dark);
    width: 130px;
    height: 130px;
    font-size: 20px;
    color: var(--clr-accent);
}


.text1:hover,
.text2:hover,
.text3:hover,
.text4:hover,
.text5:hover,
.text6:hover {
    transition:
        transform 750ms cubic-bezier(.5, 0, .5, 1),
        opacity 250ms linear;
    opacity: 20;
}

.link {
    text-decoration: none;
    color: var(--clr-accent);
    text-align: center;
}

.text1,
.text4 {
    margin-left: 7%;
}

.text2,
.text5 {
    margin-left: 38%;
}

.text3,
.text6 {
    margin-left: 69%;
}


.portfolio__item {
    overflow: hidden;
    text-decoration: none;
}


.portfolio__img {
    transition:
        transform 750ms cubic-bezier(.5, 0, .5, 1),
        opacity 250ms linear;
    border-radius: 8px;
    border-style: double;
    border-color: var(--clr-accent);
    border-width: 10px;
}

.portfolio__item:focus {
    position: relative;
    z-index: 2;
}


.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
    opacity: .5;
}

/* footer */

.footer {
    background: #111;
    color: var(--clr-accent);
    text-align: center;
    padding: 2.5em 0;
    font-size: var(--fs-h3);
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}

.footer__link:hover {
    text-decoration: underline;
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}

.social-list__item {
    margin: 0 .5em;
}

.social-list__link {
    padding: .5em;
}

/* Individual portfolio item styles */

.portfolio-item-individual {
    padding: 0 2em 2em;
    max-width: 1000px;
    margin: 0 auto;
}

.portfolio-item-individual p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Megan Portfolio Website</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
        integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <!-- Canvas -->

    <section height=90vh>
        <canvas id="canvas" width="100%" height="100vh" z-index="-1">
            <header height=10vh z-index="6">
            </header>



            <!-- (anything in here like social icons etc give them higher z-index then 5) -->

            <header>
                <div class="logo">
                    <img src="img/DevMegan2.png" alt="">
                </div>

                <!-- NAVBAR -->
                <button class="nav-toggle" aria-label="toggle navigation">
                    <span class="hamburger"></span>
                </button>
                <nav class="nav">
                    <ul class="nav__list">
                        <li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
                        <li class="nav__item"><a href="#services" class="nav__link">My Skills</a></li>
                        <li class="nav__item"><a href="#about" class="nav__link">About me</a></li>
                        <li class="nav__item"><a href="#work" class="nav__link">My Work</a></li>
                    </ul>
                </nav>
            </header>

            <!-- Introduction -->
            <section class="intro" z-index="1000" id="home">
                <h1 class="section__title section__title--intro">
                    Hi, I am <strong>Megan Lynn</strong>
                </h1>
                <p class="section__subtitle section__subtitle--intro">Full-Stack Developer</p>
                <img src="img/me.jpg" width="770" alt="a picture of Megan smiling" class="intro__img">
            </section>
        </canvas>
    </section>


    <!-- My services -->

    <section class="my-services" id="services">
        <h2 class="section__title section__title--services">My Skills</h2>
        <div class="services">
            <div class="service">
                <h3>Programming Languages</h3>
                <p>Skilled in programming with back-end languages such as Python, C#, and C++. Can manage data
                    held
                    in
                    relational
                    databases using SQL. Have experience in front-end programming with JavaScript, HTML, and
                    CSS.
                </p>
            </div> <!-- / service -->

            <div class="service">
                <h3>Tools & Technologies</h3>
                <p>Experienced in the operating systems, Windows, Linux, and macOS. Know how to use
                    shell scripting. Have experience with using frameworks in Visual Studio Code such as, .NET
                    and
                    ASP.NET
                    MVC. Have some experience using React. </p>
            </div> <!-- / service -->

            <div class="service">
                <h3>Full-Stack Development</h3>
                <p>Have a variety of different skills and enjoy utilizing the back and front end to create Full
                    Stack applications and programs. Have made projects that connect to a back-end API and
                    database
                </p>
            </div> <!-- / service -->
        </div> <!-- / services -->

        <a href="#work" class="btn">My Work</a>
    </section>


    <!-- About me -->
    <section class="about-me" id="about">
        <h2 class="section__title section__title--about">Who I am</h2>
        <p class="section__subtitle section__subtitle--about">Developer based out of the East Coast, US</p>

        <div class="about-me__body">
            <p>Hello! Thank you for visiting my page! My name is Megan and I am currently a student in college.
                I
                will
                be graduating with my Bachelor's degree in both Computer Science and CIT & Cybersecurity as a
                double
                major
                in December, 2022. I maintain a 4.0 GPA. I am pursuing a career as a Software
                Developer/Engineer.
            </p>
            <p>I genuinely enjoy programming and solving problems. I am passionate about Software Development. I
                spend
                all of my free time learning as much as I can about it. I am getting better by the day. Practice
                makes
                perfect! I am extremely motivated and I believe anybody can do or solve anything if you really
                put
                your
                mind
                to it!</p>
        </div>

        <img src="img/me2.jpg" class="about-me__img">
    </section>

    <!-- My Work -->
    <section class="my-work" id="work">
        <h2 class="section__title section__title--work">My Projects</h2>
        <p class="section__subtitle section__subtitle--work">A selection of my range of work</p>
        <div class="portfolio">
            <!-- Portfolio item 01 -->
            <a href="https://loancalculate.azurewebsites.net/Home/App" target="blank" class="portfolio__item">
                <header class="item-header1">
                    <h3>Loan Calculator</h3>
                </header>
                <img src="img/LoanCalc.PNG" height="300" width="400" alt="" class="portfolio__img">
            </a>
            <div class="text1"><a href="https://loancalculate.azurewebsites.net/Home/App" class="link"
                    target="_blank">Open
                    Project</a>
            </div>

            <!-- Portfolio item 02 -->
            <a href="https://github.com/meganlynn21/Palindrome_Checker" target="blank" class="portfolio__item">
                <header class="item-header2">
                    <h3>Palindrome Checker</h3>
                </header>
                <img src="img/palindrome.png" height="300" width="400" alt="" class="portfolio__img">
            </a>
            <div class="text2"><a href="https://github.com/meganlynn21/Palindrome_Checker" class="link"
                    target="_blank">Open
                    Project</a>
            </div>

            <!-- Portfolio item 03 -->
            <a href="https://github.com/meganlynn21/Password-Validator" target="blank" class="portfolio__item">
                <header class="item-header3">
                    <h3>Password Validator</h3>
                </header>
                <img src="img/psswrd-validator.PNG" height="300" width="400" alt="" class="portfolio__img">
            </a>
            <div class="text3"><a href="https://github.com/meganlynn21/Password-Validator" class="link"
                    target="_blank">Open
                    Project</a>
            </div>

            <!-- Portfolio item 04 -->
            <a href="https://github.com/meganlynn21/Real-Estate-Calculator" target="blank" class="portfolio__item">
                <header class="item-header4">
                    <h3>Real Estate Calculator</h3>
                </header>
                <img src="img/Real-Estate-Img.PNG" height="300" width="400" alt="" class="portfolio__img">
            </a>
            <div class="text4"><a href="https://github.com/meganlynn21/Real-Estate-Calculator" class="link"
                    target="_blank">Open
                    Project</a>
            </div>

            <!-- Portfolio item 05 -->
            <a href="https://github.com/meganlynn21/ATM" target="blank" class="portfolio__item">
                <header class="item-header5">
                    <h3>ATM</h3>
                </header>
                <img src="img/atm.png" height="300" width="400" alt="" class="portfolio__img">
            </a>
            <div class="text5"><a href="https://github.com/meganlynn21/ATM" class="link" target="_blank">Open
                    Project</a>
            </div>

            <!-- Portfolio item 06 -->
            <a href="https://github.com/meganlynn21/shopping_list" target="blank" class="portfolio__item">
                <header class="item-header6">
                    <h3>Shopping List</h3>
                </header>
                <img src="img/shopping-list.png" height="300" width="400" alt="" class="portfolio__img">
            </a>
            <div class="text6"><a href="https://github.com/meganlynn21/shopping_list" class="link" target="_blank">Open
                    Project</a>
            </div>
        </div>
    </section>


    <!-- Footer -->
    <footer class="footer">
        <!-- My email -->
        <a href="mailto:[email protected]" target="blank" class="footer__link">@rosettastone0203</a>
        <ul class="social-list">
            <li class="social-list__item"><a class="social-list__link"
                    href="https://www.linkedin.com/in/megan-keyes-a81146224" target="blank"><i
                        class="fab fa-linkedin fa-2x"></i></a>
            </li>
            <li class="social-list__item"><a class="social-list__link" href="https://twitter.com/meganlynn22"
                    target="blank"> <i class="fab fa-twitter-square fa-2x"></i></a></li>
            <li class="social-list__item"><a class="social-list__link" href="https://github.com/meganlynn21"
                    target="blank"><i class="fab fa-github fa-2x"></i></a></li>
        </ul>
    </footer>


    <script src="js/index.js"></script>

</body>

</html>

Answer 1

I used position: fixed on the section that the canvas element was in and then I used position: relative on the elements that were not clickable and it works now