Why does windowWidth not trigger?

p5.js Coding Questions
1

So my code is rather simple, it looks at an image and for every pixel brighter than a threshold, it puts a one there, which in turn just creates a interpretation of that image (code below):

let grid = [];
const gridSize = 8;
let img;

function preload() {
    img = loadImage('image.jpg');
}

function setup() {
    const myCanvas = createCanvas(window.innerWidth, window.innerHeight/2);
    myCanvas.parent('canvasDiv');
    background(0);
    textSize(gridSize);
    noStroke();
    textFont("Courier");

    imageMode(CENTER);
    img.resize(height, 0);
    image(img, width/2, height/2);
    imageMode(CORNER);

    loadPixels();

    for(let i = 0; i < width/gridSize; i+=1) {
        for(let j = 0; j < height/gridSize; j+=1) {
            if(pixels[(i * gridSize + j * gridSize * width)*4] > 20 && Math.random() > 0.1) {
                grid.push([i*gridSize, j*gridSize]);
            }
        }
    }

    background('#41413f'); //for gray screen
    //background(255); //for white screen
}

function draw() {
    for(let i = 0; i < 4; i+=1) {
        //fill(0,255,65); //matrix color
        //fill(0); //black
        fill(255); //white
        if(grid.length <= 0) {
            noLoop();
            break;
        } else {
            let pos = grid.splice(grid.length * Math.random(),1)[0];
            text(Math.round(Math.random()), pos[0], pos[1]);
        }
    }
}

Here my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My website!</title>
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="p5.js"></script>
    <script type="text/javascript" src="my_code.js"></script>
</head>
<body>
    <div id="canvasDiv"></div>
    <div id="container">
        <h1>Where all my ...</h1>

        <p>Some text</p>
        <p>some more text:</p>

        <div id="toc_container">
            <p class="toc_title">Contents</p>
            <ul class="toc_list">
                <li><a href="#First_Point_Header">1 First Point Header</a>
                    <ul>
                        <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
                        <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
                    </ul>
                </li>
                <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
                <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
            </ul>
        </div>

        <h3 id="#First_Point_Header">My First Header</h3>
        <h4 id="#First_Sub_Point_1">My First Subpoint</h4>
        <h4 id="#First_Sub_Point_2">My Second Subpoint</h4>
        <h3 id="#Second_Point_Header">My Second Header</h3>
        <h3 id="#Third_Point_Header">My Third Header</h3>

    </div>
</body>
</html>

And lastly here my CSS:

body {
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    overflow-x: hidden;
    background-color: #41413f;
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#container {
    alignment: center;
    padding: 0 20% 0;
}

#container h1 {
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    font-size: 115px;
    font-family: Arial;
    color: white;
    text-align: center;
}

#container h2 {
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    font-size: 50px;
    font-family: Arial;
    color: lightgrey;
    text-align: center;
}

#container p{
    font-size: 28px;
    line-height: 1.40;
    color: lightgrey;
    padding: 0 20% 0;
}

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px 20px 20px 15px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

If you run this, with a image containing some Letters, inside Safari or Firefox (on my MAC i might add), it completely ignores my rescaling and positioning of the image, and just puts the image somewhere in the corner :grimacing:
I don’t really know, what i did wrong :thinking: