How can i draw a line with canvas to specific Coordinates in display... (absolute cordinate)

Question

i am newbie in canvas and svg. I want to make a canvas or svg line between to specific coordinates For example i have two rectangles and i have to make a line between them (In this case i have to make this line center of two rectangles)

what i've tried: SVG codes like this:

HTML:

<svg version="1.1" id="line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="15px" xml:space="preserve">
  <path class="path2" fill="#01a09e" stroke-width="5" stroke="#01a09e" d="M0 0 l890 0"/>
</svg>

CSS:

.path2 {
  stroke-dasharray: 1120;
/*   stroke-dashoffset: 800; */
  animation: draw1 5s linear alternate;
}

@keyframes draw1 {
  from {
    stroke-dashoffset: 1120;
  }
  to {
    stroke-dashoffset: 2240;
  }
}

Answer 1

You can achieve this by using only canvas. I used quadraticCurveTo() to draw the curved line and rect() to draw the rectangles.

The quadraticCurveTo() needs an starting point, that's why I'm using moveTo() before starting to draw the line.

 const canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"); // Draw rectangle one ("r" stands for rectangle) let r_x = 20, r_y = 20, r_width = 80, r_height = 30; ctx.beginPath(); ctx.rect(r_x, r_y, r_width, r_height); // Draw curved line let start_x = r_x + r_width*2/3, start_y = r_y + r_height, point_one = { x: 20, y: 70 }, point_two = { x: 120, y: 150 }; ctx.moveTo(start_x, start_y) ctx.quadraticCurveTo( point_one.x, point_one.y, point_two.x, point_two.y ); // Draw second rectangle r_x = 80, r_y = 150; ctx.rect(r_x, r_y, r_width, r_height); ctx.stroke();

 <canvas width="300" height="200"></canvas>