Как найти ошибку в коде
помогите найти ошибку в коде, код не мой, пытаюсь в нем разобраться.
При запуске кроме слайдера ничего не отображается, хотя было задумано, что там появится маятник.
<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>