change zindex and opacity of objects on canvas

I’ve made a canvas where objects are created randomly along the x axis of the top of the canvas, and each object has is randomised between 3 different sizes to render.

Depending on the size the object is randomised to I have a conditional if statement which changes the speed the item moves down and when it reaches off the bottom of the canvas it randomises it’s size, position (back to the top of the canvas and a random x axis position) and speed again. All of the above works.

However I’m also trying to make it so dependant on the size the object is given it also changes it’s opacity and z-index and that isn’t working, here’s my code I’ve tried below and any help with it would be most appreciated:

const canvasContainer = document.querySelector('#canvasContainer');
let newCanvas = document.createElement('canvas');
let canvas = document.querySelector('#canvas');

const canvasWidth = 500;
const canvasHeight = 500;

const obstacleImage = new Image();
obstacleImage.src = "./obstacle.png"
const obstacles = [];
const numberOfObstacles = 10;
    
newCanvas.setAttribute('id', 'canvas'); 
newCanvas.setAttribute('width', canvasWidth);
newCanvas.setAttribute('height', canvasHeight);

canvasContainer.append(newCanvas);
canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

// Create the randomiser

    function ChooseRandom(min, max) {
        return Math.floor(Math.random() * ((max + 1) - min) + min);
    }
  

// Generating number of obstacles (in an array with a for loop)
  
    for (let i = 0; i < numberOfObstacles; i++) {
        const variableValue = ChooseRandom(1, 3);
        const x = ChooseRandom(50, 450);
        const y = ChooseRandom(50, 450);
        const obstacle = {
            x: x,
            y: y,
            width: 20 * variableValue,
            height: 20 * variableValue,
            speed: 0
        }

        obstacles.push(obstacle);
    }


// Changes to make during intervals for movement

    setInterval( () => {
    
        ctx.clearRect(0, 0, 2000, 2000); // clear canvas elements from their old positions
      

    // [setInterval] loop through each obstacle and perform actions
      
        for (let i = 0; i < obstacles.length; i++) {
            const obstacle = obstacles[i];

            if (obstacle.width <= 20) {
                obstacle.speed = 1;
                obstacle.style.zIndex = 1;
                obstacle.style.opacity = 0.33;
            } else if (obstacle.width <= 40) {
                obstacle.speed = 1.5;
                obstacle.style.zIndex = 2;
                obstacle.style.opacity = 0.66;

            } else {
                obstacle.speed = 2;
                obstacle.style.zIndex = 3;
                obstacle.style.opacity = 1;
            }


            obstacle.y += obstacle.speed / 2; 
            
            ctx.drawImage(
                obstacleImage,
                obstacle.x,
                obstacle.y,
                obstacle.width,
                obstacle.height
            );

    // [setInterval] check if the obstacle has gone of the bottom of the canvas, then increase score and randomise it again if so
  
            if (obstacle.y > 500) {
                const variableValue = ChooseRandom(1, 3);
                obstacle.x = ChooseRandom(0, 450);
                obstacle.y = ChooseRandom(0, 0);
                obstacle.width = 20 * variableValue,
                obstacle.height = 20 * variableValue
            }

        }


    }, 5);
  
body {
    max-height: 100vh;
    overflow: hidden;
}

#canvasContainer {
    display: flex;
    justify-content: center;
    /* background: black; */
}

canvas {
    background-color: black;
    width: 100%;
    max-width: 500px;
    object-fit: contain;
}
<section id="canvasContainer">
    </section>