Style et Couleur

Canvas permet de modifier le style et la couleur.

DéfinitionCouleur

Remplissage

1
ctx.fillStyle = couleur;
1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.fillStyle = '#F54';
4
ctx.fillRect(40, 30, 80, 60);
Contenu vu par les navigateurs ne supportant pas canvas
Canvas - Style

Contour

1
ctx.strokeStyle = couleur;
1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.strokeStyle = '#F54';
4
ctx.strokeRect(40, 30, 80, 60);
Contenu vu par les navigateurs ne supportant pas canvas
Canvas - Style

Transparence

1
ctx.globalAlpha = valeur; // valeur entre 0 et 1
1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.fillStyle = '#F54';
4
ctx.fillRect(0, 0, 100, 150);
5
ctx.fillStyle = '#45F';
6
ctx.fillRect(50, 20, 100, 40);
7
ctx.globalAlpha = 0.5;
8
ctx.fillRect(50, 70, 100, 40);
9
 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Style
La fonction rgb donne un résultat équivalent :
1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.fillStyle = '#F54';
4
ctx.fillRect(0, 0, 100, 150);
5
ctx.fillStyle = 'rgb(68, 85, 255)';
6
ctx.fillRect(50, 20, 100, 40);
7
ctx.fillStyle = 'rgb(68, 85, 255,0.5)';
8
ctx.fillRect(50, 70, 100, 40);
9
DéfinitionStyle
Épaisseur
1
ctx.lineWidth = value;
1
ctx.lineWidth = 2;
2
ctx.beginPath();
3
ctx.moveTo(30, 20);
4
ctx.lineTo(170, 20);
5
ctx.stroke();
6
7
ctx.lineWidth = 10;
8
ctx.beginPath();
9
ctx.moveTo(30, 60);
10
ctx.lineTo(170, 60);
11
ctx.stroke();
12
13
ctx.lineWidth = 30;
14
ctx.beginPath();
15
ctx.moveTo(30, 100);
16
ctx.lineTo(170, 100);
17
ctx.stroke();
 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Style
Extrémité : butt, round, square
1
ctx.lineCap = value;
1
ctx.lineWidth = 10;
2
ctx.lineCap = 'butt';
3
ctx.beginPath();
4
ctx.moveTo(30, 30);
5
ctx.lineTo(170, 30);
6
ctx.stroke();
7
8
ctx.lineCap = 'round';
9
ctx.beginPath();
10
ctx.moveTo(30, 50);
11
ctx.lineTo(170, 50);
12
ctx.stroke();
13
14
ctx.lineCap = 'square';
15
ctx.beginPath();
16
ctx.moveTo(30, 70);
17
ctx.lineTo(170, 70);
18
ctx.stroke();
 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Style
Jonction : round, bevel, miter
1
ctx.lineJoin = value;
1
ctx.lineWidth = 20;
2
ctx.lineJoin = 'round';
3
ctx.beginPath();
4
ctx.moveTo(30, 60);
5
ctx.lineTo(100, 20);
6
ctx.lineTo(170, 60);
7
ctx.stroke();
8
9
ctx.lineJoin = 'bevel';
10
ctx.beginPath();
11
ctx.moveTo(30, 100);
12
ctx.lineTo(100, 60);
13
ctx.lineTo(170, 100);
14
ctx.stroke();
15
16
ctx.lineJoin = 'miter';
17
ctx.beginPath();
18
ctx.moveTo(30, 140);
19
ctx.lineTo(100, 100);
20
ctx.lineTo(170, 140);
21
ctx.stroke();
 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Style
Lignes Pointillées :
1
ctx.setLineDash([value, value]); // taille trait, taille espace
2
ctx.lineDashOffset(value); // décalage vers la droite du pointillé
1
ctx.lineWidth = 2;
2
ctx.setLineDash([5, 15]);
3
ctx.beginPath();
4
ctx.moveTo(30, 20);
5
ctx.lineTo(170, 20);
6
ctx.stroke();
7
8
ctx.setLineDash([15, 5]);
9
ctx.beginPath();
10
ctx.moveTo(30, 50);
11
ctx.lineTo(170, 50);
12
ctx.stroke();
13
    
14
// décalage vers la droite
15
ctx.setLineDash([15, 5]);
16
ctx.lineDashOffset = 10;
17
ctx.beginPath();
18
ctx.moveTo(30, 80);
19
ctx.lineTo(170, 80);
20
ctx.stroke();
21
22
// suppression du pointillé
23
ctx.setLineDash([]);
24
ctx.beginPath();
25
ctx.moveTo(30, 110);
26
ctx.lineTo(170, 110);
27
ctx.stroke();
 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Style