JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<!-- indique le type de document au navigateur -->
<html lang="fr">
  <!-- indique la langue du document -->

  <head>
    <!-- balise ,contient les informations (metadonnées) du document -->
    <meta charset="UTF-8" />
    <!-- détermine le jeu de caratères , comme la prise en charge des accents-->
    <title>calul trajet robot</title>
    <!-- détermine le texte dans l'onglet du navigateur web -->
  </head>
  <body>
    <!-- balise ,détermine le corps du document -->
    En info_test
    <canvas id="test" width="2000" height="1000"></canvas>
    <!-- Détermine une surface de dessin en bitmap -->

    <script type="application/javascript">

      var LARG_PASSAGE = 0.5;

      function draw_line(line, color="blue", text=false){
        //console.log(line);
        const info_test = document.getElementById("test") // récupére les informations de l'id "test" -->

        if (info_test.getContext) {
          // test l'existance de l'objet contexte de dessin  -->
          const ctx = info_test.getContext("2d") // création de la variable pour dessiner   -->

          ctx.lineWidth = 3 // épaisseur du trait
          ctx.beginPath()
          ctx.font = "48px serif" // taille des lettres

          line.forEach( (monpoint, index) => {
            ctx.lineTo(monpoint.x * 50, 1000 - monpoint.y * 50);
            if(text)
            {
              ctx.fillText(index, monpoint.x * 50, 1000 - monpoint.y * 50);
            }
          });

          ctx.strokeStyle = color;
          ctx.stroke()
        }
      }    

      function parallele(line) {
        let coef_droite = [];

        for(let i=0;i<line.length-1;i++){
          let a, b, dist
          a =(line[i+1].y - line[i].y) / (line[i+1].x - line[i].x); // calcul de a  de y=ax+b
          b = line[i].y - a * line[i].x; // calcul de b  de y=ax+b

          if (line[i+1].x - line[i].x > 0){
            // Si delta x>0 on soustrait le deplacement
            dist = -LARG_PASSAGE * Math.sqrt(1 +...