<canvas id="paintbox" width="500" height="500"></canvas>
<h3>Сдвиг, масштабирование и поворот</h3><br />
Dist(0-500): <input type="range" id="dist" min="0" max="500" value="250" oninput="start()"><br />
Scale(0-10): <input type="range" id="scale" min="0" max="10" value="5" oninput="start()"><br />
Rotate(0-360): <input type="range" id="rotate" min="0" max="360" value="180" oninput="start()">

#paintbox {
  float: left;
  border: 1px solid #999;
  margin-right: 10px;
}

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;
     }

start();

function start(){
    let D=Number(document.getElementById('dist').value); // вектор смещения
    let scl=Number(document.getElementById('scale').value); // коэффициент масштабирования
    let angle=Number(document.getElementById('rotate').value)/180*Math.PI; // угол поворота
    ctx.fillStyle = 'yellow';
    ctx.fillRect(0,0,500,500);
    ctx.strokeStyle = 'blue';
    ctx.beginPath();
    for(let i=0; i<x.length; i++){
        sx=D+scl*(x[i]*Math.cos(angle)-y[i]*Math.sin(angle));
        sy=D+scl*(x[i]*Math.sin(angle)+y[i]*Math.cos(angle));
        if(i==0) ctx.moveTo(sx, sy); else ctx.lineTo(sx, sy);
    }
    ctx.stroke();   
}