画布零件未显示。我该如何纠正？

Question

我制造太阳系。为什么我的轨道没有显示在页面上？我尝试更改画布的大小，更改CSS的大小，但没有任何反应。如果仅更改半径值，则或多或少看起来不错。

JavaScript：

var sun = new Image();
var moon = new Image();
var earth = new Image();

function init() {
  sun.src = 'sun.png';
  moon.src = 'moon.png';
  earth.src = 'earth.png';
  setInterval(draw, 100);
}

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0, 0, 800, 800); // clear canvas
  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(150, 150);

  var time = new Date();

  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
  ctx.translate(105, 0);
  //ctx.fillRect(0,-12,50,24); // Shadow
  ctx.drawImage(earth, -12, -12);

  ctx.save();
  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
  ctx.translate(0, 28.5);
  ctx.drawImage(moon, -3.5, -3.5);
  ctx.restore();

  ctx.restore();
  ctx.beginPath();
  ctx.arc(150, 150, 105, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(150, 150, 150, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(150, 150, 210, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.drawImage(sun, 0, 0, 300, 300);
}

init();

HTML：

<canvas id="canvas" width="1200" height="1200">
  <script src="script.js"></script>
</canvas>