<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let root = document.documentElement;
var x,y = 0;
var canvas,ctx;
var offsetx,offsety;
var connections = [];
//{a: in ports, b: in ports, color: rbga()}
var ports = [
{type: "input"},
{type: "input"},
{type: "output"},
{type: "output"}
]
window.addEventListener("load", e => {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth
canvas.height = window.innerHeight
})
function point(x, y) {
ctx.fillRect(x,y, 1, 1);
}
function drawLines() {
var startx = 200;
var starty = 200;
renderCurveBetweenPorts(startx, starty, dims.x, dims.y);
}
function renderCurveBetweenPorts(outx, outy, inx, iny) {
var dist = (((outx - inx) ** 2) + ((outy - iny) ** 2)) ** 0.5;
var heightOfCurve = Math.abs(iny - outy);
var widthOfCurve = Math.abs(inx - outx);
var halfWidth = (inx - outx)/2;
var cpbasex = (Math.abs((widthOfCurve * 2) / dist * 10) + 60) * (heightOfCurve / 150)**0.8;
var cp1x = outx + cpbasex;
var cp2x = inx - cpbasex;
ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
//point(cp1x, outy);
//point(cp2x, iny);
//point(inx - outx, outy);
ctx.beginPath();
ctx.moveTo(outx,outy);
ctx.bezierCurveTo(cp1x, outy, cp2x, iny, inx, iny);
ctx.moveTo(outx,outy);
ctx.closePath();
ctx.lineWidth = 3;
ctx.stroke();
}
</script>
<style>
canvas {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index: -20;
}
.move {
position:fixed;
height: 10px;
width: 10px;
background: red;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>{
</body>
</html>