# Edit in JSFiddle

```    ` <!DOCTYPE html>
<html lang="eng">
<title></title>
<meta charset="UTF-8" />

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

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, () => {
maxAbsY =
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();

for (; a < pi2; a += step) {
ctx.lineTo(
);
}

ctx.closePath();
ctx.strokeStyle = "#000";
ctx.stroke();

}
}

const el = new Ellipse();

el.drawEllipse(
intersectionDetails.left, intersectionDetails.left + intersectionDetails.width,
intersectionDetails.top, intersectionDetails.top + intersectionDetails.height
);
```