Как найти ошибку в коде

помогите найти ошибку в коде, код не мой, пытаюсь в нем разобраться.

При запуске кроме слайдера ничего не отображается, хотя было задумано, что там появится маятник.

<meta charset="utf-8">
<title>Document</title>
<h1 style = ' text-align: center'> Маятник </h1>
<hr>

<head>

<label for="slider">
<h2 style='text-align: center'>Изменение угла вращения</h2>

</label>

</head>

<input type="range" list="slider" >
<datalist id = "slider" min = "0" max="360" name "range" value "360" step "1" data-orieentation="vertical">

</datalist>
<canvas id = "canvas"><canvas>
<canvas id ="canvas" style="display: block;" width="200" height="200">
</canvas>

<script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var h = canvas.height = 500;
  var w = canvas.width = 600;
  ctx.translate(w / 2, h / 2);

 const L = 200;
 const dt = 1 / 60;
 const g = 1500;
 const bob = {
 phi: Math.PI * 0.2,
 v: 2.5,
 a: 4,
 r: 10
 };
 function drawPendulum()
 {
 ctx.beginPath()
 ctx.arc(bob.x, bob.y, bob.r, 0, 2 * Math.PI)
 ctx.fill()
 ctx.moveTo(0, 0)
 ctx.lineTo(bob.x, bob.y)
 ctx.stroke()
 }

(function draw(dt) 
{
 update();
 ctx.clearRect(-w / 2, -h / 2, w, h)
 drawPendulum()
 })();

</script>

</body>

</html>

Ответы (0 шт):