I wrote you some code for that problem using quadratic Bézier curves: http://no.duckdns.org/curve/index.html

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Curve</title></head><body> <canvas id="canvas" width="800" height="800" style="border:1px solid #000000;"></canvas> <script> var ax = 0; var ay = 100; var bx = 500; var by = 200; var cx = 300; var cy = 800; var radius = 200; var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); function drawLine(ax, ay, bx, by){ context.beginPath(); context.moveTo(ax, ay); context.lineTo(bx, by); context.stroke(); } function drawCircle(x, y, r){ context.beginPath(); context.arc(x, y, r, 0, 2*Math.PI); context.stroke(); } function drawQuadraticBezierCurve(ax, ay, bx, by, cx, cy){ context.beginPath(); context.moveTo(ax, ay); var n = 100; for (var i = 1; i <= n; i++){ var t = i/n; var s = 1 - t; var x = ax*s*s + 2*bx*s*t + cx*t*t; var y = ay*s*s + 2*by*s*t + cy*t*t; context.lineTo(x, y); } context.stroke(); } function redraw(){ context.clearRect(0, 0, canvas.width, canvas.height); var bax = bx - ax; var bay = by - ay; var bcx = bx - cx; var bcy = by - cy; var ba = Math.sqrt(bax*bax + bay*bay); var bc = Math.sqrt(bcx*bcx + bcy*bcy); bax *= radius/ba; bay *= radius/ba; bcx *= radius/bc; bcy *= radius/bc; context.strokeStyle = "black"; drawLine(ax, ay, bx - bax, by - bay); drawLine(bx - bcx, by - bcy, cx, cy); drawCircle(bx, by, radius); context.strokeStyle = "green"; drawQuadraticBezierCurve(bx - bax, by - bay, bx, by, bx - bcx, by - bcy); } redraw(); window.onmousemove = function(e){ var dx = e.clientX - bx; var dy = e.clientY - by; radius = Math.sqrt(dx*dx + dy*dy); redraw(); } </script> </body></html>

Just copy&paste into a *.txt file, rename it to *.html and open in your browser.