Propriedade fillStyle do canvas HTML

Manual de referência do canvas HTML5

Definição e uso

fillStyle Propriedade que define ou retorna a cor, gradient ou padrão usados para preencher o desenho.

Exemplo

Exemplo 1

Definir um retângulo preenchido com azul:

O seu navegador não suporta a tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

Experimente pessoalmente

Dica:Mais exemplos ao fundo da página.

Sintaxe

context.fillStyle=color|gradient|pattern;

Valor do atributo

Valor Descrição
color Indica a cor de preenchimento do desenho Valor de cor CSS. Valor padrão é #000000.
gradient Objeto gradient usado para preencher o desenho (LinearouRadial)
pattern Objeto pattern usado para preencher o desenho

Detalhes técnicos

Valor padrão: #000000

Mais exemplos

Exemplo 2

Definir uma transição do topo ao fundo, como estilo de preenchimento do retângulo:

O seu navegador não suporta a tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"preto");
my_gradient.addColorStop(1,"branco");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Experimente pessoalmente

Exemplo 3

Definir uma transição do lado esquerdo ao lado direito, como estilo de preenchimento do retângulo:

O seu navegador não suporta a tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"preto");
my_gradient.addColorStop(1,"branco");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Experimente pessoalmente

Exemplo 4

Definir uma transição do preto ao vermelho ao branco, como estilo de preenchimento do retângulo:

O seu navegador não suporta a tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"preto");
my_gradient.addColorStop(0.5,"vermelho");
my_gradient.addColorStop(1,"branco");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Experimente pessoalmente

Exemplo 5

Imagem usada:

lamp

Usar imagens para preencher o desenho:

O seu navegador não suporta a tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

Experimente pessoalmente

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou a propriedade pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Atenção:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Manual de referência do canvas HTML5