JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<script src="https://raw.githubusercontent.com/voidqk/polybooljs/master/dist/polybool.min.js"></script>
<canvas id='main' width=500 height=500></canvas>

CSS

canvas{
    background: #fff;
    border: 1px solid #ccc;
}

JavaScript

var canvas = document.getElementById('main');
var ctx = canvas.getContext('2d');

class Rect{
	constructor(x, y, width, height) {
		this.x = x + Math.min(0, width);
        this.y = y;
        this.y2 = y + height;
        if(this.y > this.y2) {
        	[this.y, this.y2] = [this.y2, this.y];
        }
        this.width = Math.abs(width);
    }
}


function rectUnion(rects) {
	let result = [];
    
}


rectUnion([
	new Rect(0, 20, 20, 80),
	new Rect(20, 0, 80, 20),
	new Rect(20, 80, 80, 20),
	new Rect(80, 20, 20, 80),
]);


ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 100);
ctx.lineTo(50, 100);
ctx.lineTo(50, 50);

ctx.moveTo(60, 60);
ctx.lineTo(60, 90);
ctx.lineTo(90, 90);
ctx.lineTo(90, 60);
ctx.lineTo(60, 60);

ctx.fill();