Edit in JSFiddle

    ` <!DOCTYPE html>
    <html lang="eng">
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    
    <body>
    <canvas id="canvas" width="500px" height="500px"> </canvas>
  
    </body>
    </html>`

              
const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    const ELLIPSE_DOTS_COUNT = 10;
    const randomColor = () =>
        `rgb(${[1, 2, 3].map(() => (Math.random() * 256) | 0)})`;
    // helper func
    const times = (amount, callback) => [...Array(amount).keys()].map(callback);

    class Rectangle {
        constructor(x, y, height, width) {
            this.x = x;
            this.y = y;
            this.height = height;
            this.width = width;
        }
    
        intersect(baseSquare, square) {
            const xIntersect = baseSquare.x < square.x + square.width &&
                baseSquare.x + baseSquare.width > square.x;
            const yIntersect = baseSquare.y < square.y + square.height &&
                baseSquare.y + baseSquare.height > square.y;
            if (!(yIntersect && xIntersect)) {
                return undefined;
            }
            return yIntersect && xIntersect;
        }
    
        intersectDetails(baseSquare, square) {
            const left = Math.max(baseSquare.x, square.x);
            const width =
                Math.min(baseSquare.x + baseSquare.width, square.x + square.width) - left;
            const top = Math.max(baseSquare.y, square.y);
            const height = Math.min(baseSquare.y + baseSquare.height, square.y + square.height) - top;
            ctx.beginPath();
            ctx.strokeStyle = "red";
            ctx.rect(left, top, width, height);
            ctx.stroke();
            return {left, width, top, height};
        }
    
    
        draw() {
            ctx.beginPath();
            ctx.strokeStyle = randomColor();
            ctx.rect(this.x, this.y, this.width, this.height);
            ctx.stroke();
        }
    }

    const rectangle1 = new Rectangle(100,100,200,200);
    const rectangle2 = new Rectangle(200,200,200,200);
    
    rectangle1.draw();
    rectangle2.draw();
    console.log(rectangle2);
    
    const figure = new Rectangle();
    
    const intersectionDetails = figure.intersectDetails(rectangle1, rectangle2);
    console.log(intersectionDetails);


    class Ellipse {
        constructor(x1, x2, y1, y2) {
            this.x1 = x1;
            this.x2 = x2;
            this.y1 = y1;
            this.y2 = y2;
        }
    
        drawDotsInEllipse({radiusX, radiusY, centerX, centerY}) {
            const ctx = canvas.getContext("2d");
            const rand = (min, max) => Math.random() * (max - min) + min;
            const SIDE = 2;
            const HALF_SIDE = 2;
    
            let array = [];
    
            times(ELLIPSE_DOTS_COUNT, () => {
                let x = Math.round(rand(-radiusX + HALF_SIDE, radiusX - HALF_SIDE)),
                    maxAbsY =
                        ((radiusY - HALF_SIDE) / radiusX) *
                        Math.sqrt(radiusX * radiusX - x * x),
                    y = Math.round(rand(-maxAbsY, maxAbsY));
                array.push({x, y});
                ctx.beginPath();
                ctx.rect(x + centerX - HALF_SIDE, y + centerY - HALF_SIDE, SIDE, SIDE);
                ctx.stroke();
            });
            //console.log(array);
        }
    
        drawEllipse(x1, x2, y1, y2) {
            const centerX = (x1 + x2) * 0.5;
            const centerY = (y1 + y2) * 0.5;
            const radiusX = Math.abs(centerX - x1);
            const radiusY = Math.abs(centerY - y1);

            const step = 0.01;
            const pi2 = Math.PI * 2 - step;
            let a = step;
    
            ctx.beginPath();
    
            ctx.moveTo(centerX + radiusX * Math.cos(0),
                       centerY + radiusY * Math.sin(0));
    
            for (; a < pi2; a += step) {
                ctx.lineTo(
                    centerX + radiusX * Math.cos(a),
                    centerY + radiusY * Math.sin(a)
                );
            }
    
            ctx.closePath();
            ctx.strokeStyle = "#000";
            ctx.stroke();
    
            this.drawDotsInEllipse({radiusX, radiusY, centerX, centerY});
        }
    }
    
    const el = new Ellipse();
    
    el.drawEllipse(
    	intersectionDetails.left, intersectionDetails.left + intersectionDetails.width,
      intersectionDetails.top, intersectionDetails.top + intersectionDetails.height
    );