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

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/2, ht);
c.stroke();

c.lineWidth="2"; 
//Demi-cercle central
c.beginPath();
c.arc(lt/2, ht/2, lt*0.064, 0.5*Math.PI, 1.5*Math.PI, false);
c.stroke();

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


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


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

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

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



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

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

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

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