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 DOMString passado como um valor de CSS <color>.
gradient
Um objeto CanvasGradient (um gradiente linear ou radial).
pattern
Um objeto 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:

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.

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:

ScreenshotLive sample

Especificações

Especificação Estado Comentário
HTML Living Standard
The definition of 'CanvasRenderingContext2D.fillStyle' in that specification.
Padrão em tempo real  

Compatibibidade com o Navegador

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suporte Básico (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Característica Android Chrome para Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte Básico (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
  • 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

Etiquetas do documento e colaboradores

Colaboradores desta página: MarceloBRN, sergiorg
Última atualização por: MarceloBRN,