Вот простой код. Arc работает наверняка, но когда я пытаюсь поместить requestAnimationFrame в функцию, вся функция просто не работает.
Я ничего не делал, потому что я делаю это из курса холста Криса Курса. Точно такой же код, как и у него.
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var x = 200;
function animate(){
requestAnimationFrame(animate);
ctx.beginPath();
ctx.arc(x, 200, 30, 0, Math.PI * 2, false);
ctx.strokeStyle = 'blue';
ctx.stroke();
console.log('F');
x =+ 1;
}
<html>
<head>
<meta charset="utf-8"/>
<style>
*{
padding:0;
margin:0;
}
body{
overflow: hidden;
}
</style>
</head>
<body>
<canvas>
</canvas>
<script src="canvas.js"></script>
</body>
</html>