[dima85]

В приложение рисунок который получается в canvas.
Его размеры 600x600 я хочу убрать правую, пустую часть и сделать его 300x600
Но как только я это делаю, рисунок уезжает за приделы видимой части.
Надеюсь понятная моя проблема, помогите пожалуйста ее решить.

<div class="knob">
      <canvas class="knob-canvas" width="300" height="600"></canvas>
    </div>

var canvas;
      var ctx;
      window.addEventListener('load', onLoad);
      function onLoad() {
        canvas = document.querySelector(".knob-canvas");
        ctx = canvas.getContext("2d");
        draw();
      }
      var mouseX = 0;
      var mouseY = 0;

      var r = 250;
      var l = 40;
      var n = 450/1.8;

      function draw() {
        var relativeMouseX = (canvas.width/2) - (canvas.width - mouseX);
        var relativeMouseY = (canvas.height/2) - (canvas.height - mouseY);
        var moused = xyToDeg(relativeMouseX, relativeMouseY);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < n; i++) {
          var t = i*(360/n);
          var tr = (degToRad(t-90)) % 360;
          if (t > 330 || t < 200) continue;
          var deltaT = moused - t;
          deltaT = degToRad(deltaT)
          if (moused < (t - 20) || moused > (t + 20)) {
            var deltaR = 0;
          }
          var dl = l;
          if (i % 2 == 0) dl = l/1.1;
          if (Math.round(t) % 45 == 0) dl = 1.15*l;
          var fromX = canvas.width	/ 2 + r * Math.cos(tr);
          var fromY = canvas.height	/ 2 + r * Math.sin(tr);
          var toX = canvas.width	/ 2 + (r + dl + deltaR) * Math.cos(tr);
          var toY = canvas.height	/ 2 + (r + dl + deltaR) * Math.sin(tr);
          ctx.beginPath();
          ctx.moveTo(fromX, fromY);
          ctx.lineTo(toX, toY);
          ctx.lineWidth = 1.5;
          ctx.strokeStyle = 'hsla(' + ((t/2)-130) + ', 100%, 50%, 1)';
          ctx.stroke();
        }
        window.requestAnimationFrame(draw);
      }
      function degToRad(deg) {
        return deg * (Math.PI / 180);
      }
      function xyToDeg(x, y) {
        var d = Math.atan2(x, y) * (180 / Math.PI);
        if (d < 0) {
          d = 180 - d;
        }
        return d;
      }