Javascript 2d canvas collision?

I am currently making a simple game to try and better learn the language without frameworks or libraries. The collision systems always confuses me. For this game I need it to detect if either of the hazards collides with the player square. Also if you could explain the code for the collision detection I would appreciate it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Dodge Game</title>
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
        </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="1000"></canvas>  
    
        var canvas = document.getElementById("myCanvas");    //This variable will be use as a reference to the canvas object
        var ctx = canvas.getContext('2d');  //A variable to hold the value of the context

        var framesPerSecond = 60; //FPS

        const width = canvas.width; //Width of the canvas
        const height = canvas.height; //Height of the canvas    

        function createPlayer(){
            player = {
                x:400,
                y:600,
                //vx:5,
                w:25,
                h:25,
            }   
        }
        createPlayer();//Creates player once.


            hazard = {
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,
            }
            hazard2 ={
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,  
            }
        function createHazard(){
                 hazard = {
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,
            }
            hazard2 ={
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,  
            } 
        }
        setInterval(createHazard, 2000);

        function mouseMove(event){
        player.x = event.clientX - canvas.getBoundingClientRect().left - player.w / 2;
        if (player.x  width) player.x = width - player.w;
        }
        document.addEventListener("mousemove", mouseMove);

        function drawEverything(){
            ctx.fillStyle = 'red'; //Draws the red background every frame covering square
            ctx.fillRect(0, 0, width, height);

            ctx.fillStyle = 'black';
            ctx.fillRect(player.x, player.y, player.w, player.h); //Player

            ctx.fillStyle = 'white';
            ctx.fillRect(hazard.x, hazard.y, hazard.w, hazard.h); //Hazard

            ctx.fillStyle = 'white';
            ctx.fillRect(hazard2.x, hazard2.y, hazard2.w, hazard2.h); //Hazard 2

        }

        function movement(){
            hazard.y += hazard.vx;   
            hazard2.y += hazard2.vx; 


        }

        function update(){
            drawEverything();
            movement();
        }
        setInterval(update, 1000/ framesPerSecond)
    
</body>
</html>


Source: stackoverflow-javascript