I codici di colore con lo stroke non combinano...

Prendiamo un ImageData di dimensioni 5 x 5.
Come facciamo?

function inizia(){
 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="white";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
}

Ecco.
Ora stampiamo 20 valori, corrispondenti ai valori dei primi 5 pixel:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="white";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

Ecco i primi 5 pixel (4 valori per pixel) con un rettangolo delle stesse dimensioni del canvas con uno sfondo bianco:

255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 

Ora cambiamo colore al rettangolo: rosso:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="red";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

255 0 0 255 255 0 0 255 255 0 0 255 255 0 0 255 255 0 0 255 

Verde:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="green";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 128 0 255 0 128 0 255 0 128 0 255 0 128 0 255 0 128 0 255 

Blu:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="blue";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 0 255 255 0 0 255 255 0 0 255 255 0 0 255 255 0 0 255 255 

Nero:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="black";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 

Sì, tutto corrisponde.

---

Ora proviamo con lo stroke piuttosto che col fill.

Sfondo bianco, stroke nero:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="white";
 ctx.rect(0,0,10,10);
 ctx.fill();
 
 ctx.strokeStyle="black";
 ctx.beginPath();
 ctx.moveTo(0,0)
 ctx.lineTo(5,0)
 ctx.closePath();
 ctx.stroke();
 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

64 64 64 255 64 64 64 255 64 64 64 255 64 64 64 255 128 128 128 255 

Ora da sfondo bianco stroke nero cambiamo lo sfondo in rosso:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="red";
 ctx.rect(0,0,10,10);
 ctx.fill();
 
 ctx.strokeStyle="black";
 ctx.beginPath();
 ctx.moveTo(0,0)
 ctx.lineTo(5,0)
 ctx.closePath();
 ctx.stroke();
 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

64 0 0 255 64 0 0 255 64 0 0 255 64 0 0 255 128 0 0 255 

Nero su verde:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="green";
 ctx.rect(0,0,10,10);
 ctx.fill();
 
 ctx.strokeStyle="black";
 ctx.beginPath();
 ctx.moveTo(0,0)
 ctx.lineTo(5,0)
 ctx.closePath();
 ctx.stroke();
 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 32 0 255 0 32 0 255 0 32 0 255 0 32 0 255 0 64 0 255 

Nero su blu:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="blue";
 ctx.rect(0,0,10,10);
 ctx.fill();
 
 ctx.strokeStyle="black";
 ctx.beginPath();
 ctx.moveTo(0,0)
 ctx.lineTo(5,0)
 ctx.closePath();
 ctx.stroke();
 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 0 64 255 0 0 64 255 0 0 64 255 0 0 64 255 0 0 128 255 

Cerchiamo di trarre delle conclusioni...

• Nero su bianco: 64 64 64 255
• Nero su rosso: 64 0 0 255
• Nero su verde: 0 32 0 255
• Nero su blu: 0 0 64 255

Buio pesto...