TEAMOVI
/
Progetto_2023-OVI


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
							<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="1500" height="200"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Input stringhe
      const str1 = "Se ni’ mondo esistesse un po’ di bene e ognun si honsiderasse suo fratello ci sarebbe meno pensieri e meno pene e il mondo ne sarebbe assai più bello";
      const str2 = "fratello";

      // Colori
      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      // Scrivi la prima stringa
      ctx.fillText(str1, 10, 50);

      // Cerca la seconda stringa nella prima
      const startIndex = str1.indexOf(str2);
      const endIndex = startIndex + str2.length;

      // Colore
      ctx.fillStyle = "brown";
      ctx.fillRect(
        ctx.measureText(str1.substring(0, startIndex)).width + 10,
        32,
        ctx.measureText(str2).width,
        20
      );

      // Scrivi la seconda stringa nel colore
      ctx.fillStyle = "black";
      ctx.fillText(
        str1.substring(startIndex, endIndex),
        ctx.measureText(str1.substring(0, startIndex)).width + 10,
        50
      );
    </script>
  </body>
</html>