Fix broken firefox window.innerheight/width within p5

Question

I am currently trying to make a image out of numbers. The code is the following:

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

function preload() {
    img = loadImage('CR-Logo.jpg');
}

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

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

    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]);
        }
    }
}

This should load an image, resize it to the smaller value of width and height and then paint numbers, where the image was not black ... it works fine in every browser, except for Firefox, where the following "bug" was encountered not only by me:

I am not a Javascript or p5 professional, and would like to know, what a quick and dirty way might be, to fix this and not have the wrong values there, as this just breaks my code and the image is basically painted outside of the canvas.

Thank you!

Fix broken firefox window.innerheight/width within p5

0 Answers