Демо JavaScript:
Dist(0-500):
<canvas id="paintbox" width="500" height="500"></canvas><br /> Dist(0-500): <input type="range" id="dist" min="0" max="500" value="250"> <input type="button" onclick="start()" value="Пуск">
<script> var ctx; var x = []; var y = []; ctx = document.getElementById('paintbox').getContext('2d'); var t= 0; var R=10; while (t <= 2*Math.PI) { x.push( 3*R*Math.cos(t)); // Параметрическое уравнение эллипса y.push( R*Math.sin(t)); t = t + Math.PI/36; } function start(){ let D=Number(document.getElementById('dist').value); ctx.fillStyle = 'yellow'; ctx.fillRect(0,0,500,500); ctx.strokeStyle = 'blue'; ctx.beginPath(); for(let i=0; i<x.length; i++){ sx=D+x[i]; sy=D+y[i]; if(i==0) ctx.moveTo(sx, sy); else ctx.lineTo(sx, sy); } ctx.stroke(); } </script>