Attribut fillStyle du canvas HTML

Manuel de référence du canvas HTML5

Définition et utilisation

fillStyle L'attribut fillStyle définit ou retourne la couleur, le dégradé ou le motif utilisé pour remplir le dessin.

Exemple

Exemple 1

Définir un losange rempli de bleu :

Votre navigateur ne prend pas en charge la balise canvas.

JavaScript:

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

Essayez-le vous-même

Astuce :Plus d'exemples sont fournis en bas de la page.

Syntaxe

context.fillStyle=color|gradient|pattern;

Valeur de l'attribut

Valeur Description
color Indiquer la couleur de remplissage du dessin Valeur de couleur CSS. Valeur par défaut est #000000.
gradient Objet gradient utilisé pour remplir le dessin (linéaireouradiatif)
pattern Objet pattern utilisé pour remplir le dessin

Détails techniques

Valeur par défaut : #000000

Plus d'exemples

Exemple 2

Définir un dégradé vertical comme style de remplissage de losange :

Votre navigateur ne prend pas en charge la balise 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,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Essayez-le vous-même

Exemple 3

Définir un dégradé horizontal comme style de remplissage de losange :

Votre navigateur ne prend pas en charge la balise 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,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Essayez-le vous-même

Exemple 4

Définir un dégradé du noir au rouge au blanc comme style de remplissage de losange :

Votre navigateur ne prend pas en charge la balise 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,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Essayez-le vous-même

Exemple 5

Images utilisées :

lampe

Utiliser des images pour remplir le dessin :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

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

Essayez-le vous-même

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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

Attention :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Manuel de référence du canvas HTML5