var canvas = document.getElementById("terrain");

canvas.width = window.innerWidth*0.74;
var lt = canvas.width;
canvas.height = lt*0.536;
var ht = canvas.height;


var c = canvas.getContext('2d');
console.log(canvas);

c.lineWidth="5"; 


//Bordures du terrain
c.beginPath();
c.rect(0, 0, lt, ht);
c.stroke();


c.lineWidth="2"; 
//Ligne centrale
c.beginPath();
c.moveTo(lt/2, ht);
c.lineTo(lt/2, 0);
c.stroke();

//Cercle central
c.beginPath();
c.arc(lt/2, ht/2, lt*0.064, 0, Math.PI*2, false);
c.stroke();


/* RAQUETTES */
//Rectangle raquette gauche
c.beginPath();
c.rect(0, ht/3, lt*0.208, ht/3);
c.stroke();

//Rectangle raquette droite
c.beginPath();  
c.rect(lt-lt*0.208, ht/3, lt-lt*0.208, ht/3);
c.stroke();

//Cercle raquette gauche
c.beginPath();
c.arc(lt*0.208, ht/2, lt*0.064, 1.5*Math.PI, 0.5*Math.PI, false);
c.stroke();

//Cercle raquette droite
c.beginPath();
c.arc(lt-(lt*0.208), ht/2, lt*0.064, 0.5*Math.PI, 1.5*Math.PI, false);
c.stroke();


/* LIGNES LANCERS FRANCS */
//Ligne lf 1 gauche
c.beginPath();
c.moveTo(0, 0.06*ht);
c.lineTo(lt*0.075, 0.06*ht);
c.stroke();

//Ligne lf 2 gauche
c.beginPath();
c.moveTo(0, 0.94*ht);
c.lineTo(lt*0.075, 0.94*ht);
c.stroke();

// Cercle lf gauche
c.beginPath();
c.arc(lt*0.063, ht/2, ht*0.44, 1.5*Math.PI, 0.5*Math.PI, false);
c.stroke();


//Ligne lf 1 droite
c.beginPath();
c.moveTo(lt, 0.06*ht);
c.lineTo(lt*0.925, 0.06*ht);
c.stroke();

//Ligne lf 2 droite
c.beginPath();
c.moveTo(lt, 0.94*ht);
c.lineTo(lt*0.925, 0.94*ht);
c.stroke();

//Cercle lf droite
c.beginPath();
c.arc(lt*0.937, ht/2, lt*0.236, 0.5*Math.PI, 1.5*Math.PI, false);
c.stroke();


/* PANIERS */
//Cercle panier gauche
c.beginPath();
c.arc(lt*0.063, ht/2, ht*0.083, 1.5*Math.PI, 0.5*Math.PI, false);
c.stroke();

//Panier gauche
c.beginPath();
c.moveTo(lt*0.06, ht*0.44);
c.lineTo(lt*0.06, ht*0.56);
c.stroke();

c.beginPath();
c.arc(lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
c.stroke();

c.beginPath();
c.moveTo(lt*0.06, ht/2);
c.lineTo(lt*0.067, ht/2);
c.stroke();


//Cercle panier droit
c.beginPath();
c.arc(lt-lt*0.063, ht/2, ht*0.083, 0.5*Math.PI, 1.5*Math.PI, false);
c.stroke();

//Panier droit
c.beginPath();
c.moveTo(lt-lt*0.06, ht-ht*0.44);
c.lineTo(lt-lt*0.06, ht-ht*0.56);
c.stroke();

c.beginPath();
c.arc(lt-lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
c.stroke();

c.beginPath();
c.moveTo(lt-lt*0.06, ht-ht/2);
c.lineTo(lt-lt*0.067, ht-ht/2);
c.stroke();