Sto usando il tag <canvas> … </canvas>.
Ho disegnato quattro segmenti e quattro rettangoli indicando per ciascuno il colore e in più per ogni segmento e per ogni rettangolo ho messo la scritta del colore.

Ho notato che le istruzioni per i colori dei rettangoli: ctx.fillStyle="red";
e le istruzioni dei colori delle scritte: ctx.fillText("red",10,90);
funzionano perfettamente, mentre per le istruzioni dei colori dei segmenti:
ctx.strokeStyle="red";
ctx.strokeStyle="blue";
ctx.strokeStyle="green";
ctx.strokeStyle="magenta";
succede, stranamente, che solo l'ultimo colore (il magenta) viene eseguito, ma gli altri segmenti hanno colori non definibili. Desidererei sapere perché. Grazie.

lanvoel


codice:
<!doctype html>
<html lang="it">
<head>
<title> canvas: colori segmenti </title>
<body>
<canvas id="lavagna" width="400" height="400" style="border:1px solid maroon"></canvas>
<script>
  var c = document.getElementById('lavagna');
  var ctx = c.getContext("2d");

  ctx.strokeStyle="red";
  ctx.moveTo(10,80);  
  ctx.lineTo(190,80);  
  ctx.stroke();
  ctx.fillStyle="red";
  ctx.fillText("red",10,90);

  ctx.strokeStyle="blue";
  ctx.moveTo(10,160);  
  ctx.lineTo(190,160);  
  ctx.stroke();
  ctx.fillStyle="blue";
  ctx.fillText("blue",10,170);

  ctx.strokeStyle="green";
  ctx.moveTo(10,240);  
  ctx.lineTo(190,240);  
  ctx.stroke();
  ctx.fillStyle="green";
  ctx.fillText("green",10,250);

  ctx.strokeStyle="magenta";
  ctx.moveTo(10,320);  
  ctx.lineTo(190,320);  
  ctx.stroke();
  ctx.fillStyle="magenta";
  ctx.fillText("magenta",10,330);

 ctx.fillStyle="red";
 ctx.fillRect(210,80,180,40);
 ctx.fillText("red",210,130);

 ctx.fillStyle="blue";
 ctx.fillRect(210,160,180,40);
 ctx.fillText("blue",210,210);

 ctx.fillStyle="green";
 ctx.fillRect(210,240,180,40);
 ctx.fillText("green",210,290);

 ctx.fillStyle="magenta";
 ctx.fillRect(210,320,180,40);
 ctx.fillText("magenta",210,370);
</script>
</body>
</html>