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:

CSS:

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

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

user_14895985 · Answer

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 drawing 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: 30, y: 130 },
    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();

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

1 Answers