--- title: CanvasRenderingContext2D.fillStyle slug: Web/API/CanvasRenderingContext2D/fillStyle tags: - API - Canvas - CanvasRenderingContext2D - Propriedade - Referencia translation_of: Web/API/CanvasRenderingContext2D/fillStyle ---

A propriedade CanvasRenderingContext2D.fillStyle da API do Canvas 2D especifica a cor ou o estilo para usar regiões internas. O valor inicial é #000 (preto).

Veja também o capítulo Aplicando estilos e cores no Canvas Tutorial.

Sintaxe

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

Opções

color: Um {{domxref("DOMString")}} passado como um valor de CSS {{cssxref("<color>")}}.
gradient: Um objeto {{domxref("CanvasGradient")}} (um gradiente linear ou radial).
pattern: Um objeto {{domxref("CanvasPattern")}} (uma imagem repetitiva).

Examples

Usando a propriedade `fillStyle` para definir uma cor diferente

Isto é apenas um trecho de código simples usando a propriedade fillStyle para definir uma cor diferente.

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);

Edite o código abaixo e veja as alterações atualizadas na tela:

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);

Um exemplo de `fillStyle` com laços `for`

Neste exemplo, nós usamos dois laços for para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem resultante deve parecer algo como uma captura de tela. Não há nada de espetacular acontecendo aqui. Usamos as duas variáveis i é j para gerar uma cor RGB exclusiva para cada quadrado, e apenas modificamos os valores vermelho e verde. O canal azul tem um valor fixo. Ao modificar os canais, você pode gerar todos os tipos de paletas. Ao aumentar os valores, você pode conseguir algo que pareça com as paletas de cores que o Photoshop usa.

<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);
  }
}

O resultado fica assim:

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

Especificações

Especificação	Estado	Comentário
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}	{{Spec2('HTML WHATWG')}}

Compatibibidade com o Navegador

Característica	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Suporte Básico	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}

Característica	Android	Chrome para Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Suporte Básico	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}

Notas específicas doWebKit/Blink

Nos navegadores baseados em WebKit e Blink, além da propriedade fillStyle, o método não padrão e obsoleto ctx.setFillColor() é implementado.
```
setFillColor(color, optional alpha);
setFillColor(grayLevel, optional alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);
```

Veja também

A interface que o define, {{domxref("CanvasRenderingContext2D")}}
{{domxref("CanvasGradient")}}
{{domxref("CanvasPattern")}}