<!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>