--- title: CanvasRenderingContext2D.fillStyle slug: Web/API/CanvasRenderingContext2D/fillStyle tags: - API - CamvasRenderingContext2D - Canvas - Proprietà - Riferimento translation_of: Web/API/CanvasRenderingContext2D/fillStyle ---

La proprietà CanvasRenderingContext2D.fillStyle delle Canvas 2D API specifica il colore o lo stile da usare all'interno delle forme. Il colore preimpostato è #000 (nero).

Vedi anche i capitoli Applicare stili e colori nel Canvas Tutorial.

Sintassi

ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;

Opzioni

color: Una {{domxref("DOMString")}} letta come valore CSS {{cssxref("<color>")}}.
gradient: Un oggetto {{domxref("CanvasGradient")}} (gradiente lineare o radiale).
pattern: Un oggetto {{domxref("CanvasPattern")}} (immagine ripetuta).

Esempi

Usare la proprietà `fillStyle` per impostare un colore diverso

In questa semplice porzione di codice viene usata la proprietù fillStyle per impostare un colore diverso.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

Modifica il codice qui sotto e vedi i cambiamenti in tempo reale nel canvas:

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Un esempio di `fillStyle` con i cicli for

In questo esempio, useremo due cicli for per disegnare una griglia di rettangoli, ognuno di un colore differente. Il risultato finale dovrebbe assomigliare allo screenshot. Niente di particolarmente spettacolare. Usiamo due variabili i e j per generare un colore RGB unico per ogni quadrato, questo modificando soltanto i valori del rosso e del verde. Il canale del blu ha un valore fisso. Modificando i canali, puoi generare ogni tipo di palette. Aumentando le ripetizioni del ciclo, puoi ottenere qualcosa di assomigliante alle palette usate da Photoshop.

<canvas id="canvas" width="150" height="150"></canvas>

var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
  for (var j=0;j<6;j++){
    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                     Math.floor(255-42.5*j) + ',0)';
    ctx.fillRect(j*25,i*25,25,25);
  }
}

Il risultato assomiglia a questo:

{{EmbedLiveSample("Un_esempio_di_fillStyle_con_i_cicli_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

Specifiche

Specifiche	Stato	Commento
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}	{{Spec2('HTML WHATWG')}}

Compatibilità dei Browser

Caratteristica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}

Caratteristica	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}

WebKit/Blink note specifiche

Nei browser basati su WebKit e Blink, un metodo non standard e deprecato ctx.setFillColor() è implementato oltre a queste proprietà.

setFillColor(color, optional alpha);
setFillColor(grayLevel, optional alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);

Vedi anche

Come definire l'interfaccia, {{domxref("CanvasRenderingContext2D")}}
{{domxref("CanvasGradient")}}
{{domxref("CanvasPattern")}}