\* Project Description
======================

I am creating a responsive tournament Brackets tree web Page.

\* Problem
==========

My Problem is that I want to connect each Bracket "each bracket is a div of its own" to the next one with a decorated line, in general I want two connect two divs with a line that I can decorate.

### - Example

Example1

![Example1](https://i.ibb.co/mvV2k9R/example-1.png)

Example2

![Example2](https://i.ibb.co/2SWfytt/example-2.png)

\* what I tried
===============

I tried using the [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D "This is the CanvasRenderingContext2D Link") but I didn't have much luck in it, or at least didn't know how to fully utilize it

\* What I want/ What's expected
===============================

I want to be able to connect the two brackets/divs with a line that can be bent and moved "by the developer not the user" to design it.

* p.s: This only needs to be shown on screens larger than "xs" so mobile devices is not a concern.

\* My Code
==========

[Stackblitz Project](https://stackblitz.com/edit/angular-tounment-brackets?file=app/app.component.html "This is the stackblitz Link")

- Used Libraries and versions
-----------------------------

* Angular V:5.1
* Flex-Layout "angular" V: 2.00 beta 12
* Angular Material V: 5.01