let canvas = document.querySelector('#scene');

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

let ctx = canvas.getContext('2d');
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle

// les fonctions
function degToRad(deg) {
  return deg * (Math.PI / 180.0);
}

// les animations
// une loop ne peut pas fonctionner car l'image ne se rafraîchit pas entre les iteration de boucle
// for (let index = 0; index < array.length; index++) {  
// }

let pos = {
  x:50,
  y:50,
  r: 20,
  a: 0
}

let monAnime = function(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // pos.x = pos.x +1;
  pos.x += 2;
  // pos.x++;
  // pos.r++;
  pos.a++;
  ctx.beginPath();
  ctx.arc(pos.x, pos.y, pos.r, degToRad(pos.a), degToRad(pos.a+180));
  ctx.stroke();

  // on relance la fonction a la prochaine frame
  window.requestAnimationFrame(monAnime);
}


monAnime();