JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<canvas width="500" height="600"></canvas>

CSS

canvas{
  background:#ff0;
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(30,30,20,0,2*Math.PI);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(155,155,20,0,2*Math.PI);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(30,130,20,0,2*Math.PI);
ctx.stroke();
ctx.closePath();
/*
ctx.beginPath();
ctx.moveTo(30, 10);
ctx.quadraticCurveTo(80,40,130,10);
ctx.arc(130, 30, 20, 1.5*Math.PI, 0.5*Math.PI, true);
ctx.quadraticCurveTo(80,20,30,50);
ctx.arc(30, 30, 20, 0.5*Math.PI, 1.5*Math.PI, true);
ctx.fillStyle = "#f0f";
ctx.fill();
ctx.closePath();
*/

ctx.beginPath();
ctx.fillStyle = '#f00';
ctx.moveTo(50, 30);
ctx.quadraticCurveTo(20,80,50,130);
ctx.arc(30, 130, 20, 0, Math.PI, true);
ctx.quadraticCurveTo(40,80,10,30);
ctx.arc(30, 30, 20, Math.PI, 0, true);
ctx.strokeStyle = "#f0f";
ctx.fill();
ctx.closePath();
var delta = 10;
var r = 20;
var circle1 = {
	x : 30,
  y : 30
};

var circle2 = {
	x : 130,
  y : 30
};

var circle3 = {
	x : 30, 
  y : 130
};
var circle4 = {
	x : 155,
  y : 155
}

//drawConnection(circle1, circle4);

drawConnection(circle1, circle3);

function drawConnection(circle1, circle2){
	var cos = getCosinus(circle1, circle2);
  var angle = getAngle(Math.acos(cos));
  console.log(angle);
  var curve1Start = {
  	x : Math.round(circle1.x + r*Math.cos(angle)),
    y : Math.round(circle1.y + r*Math.sin(angle))
  }
  
  var curve1End = {
  	x : Math.round(circle2.x + r*Math.cos(angle)),
    y : Math.round(circle2.y + r*Math.sin(angle))
  }
  
  var curve2End = {
  	x : Math.round(circle1.x - r*Math.cos(angle)),
    y : Math.round(circle1.y - r*Math.sin(angle))
  }
  console.log(curve1Start);
  console.log(curve1End);
  console.log(curve2End);
  
  ctx.beginPath();
  ctx.fillStyle = '#f0f';
  ctx.moveTo(curve1Start.x, curve1Start.y);
  ctx.quadraticCurveTo((circle1.x + circle2.x)/2,(circle1.y + circle2.y)/2,curve1End.x,curve1End.y);
  ctx.arc(circle2.x, circle2.y, r, Math.abs(angle), Math.abs(angle - Math.PI),...