HTML | canvas fillStyle Property
The canvas fillStyle property is used to set or return the color, gradient, or pattern used to fill the drawing.
Style:
context.fillStyle=color|gradient|pattern;
Property Value:
- color: It is used to set the filled color of drawing. The default value of canvas fillStyle property is black.
- gradient: It is used to set the gradient object to fill the drawing. The gradient object are linear or radial.
- pattern: It is used to set the pattern to fill the drawing.
Example-1:
<!DOCTYPE html> < html > < head > < title > HTML canvas fillStyle property </ title > </ head > < body > < canvas id = "GFG" width = "500" height = "300" > </ canvas > < script > var x = document.getElementById("GFG"); var contex = x.getContext("2d"); // set fillStyle color green. contex.fillStyle = "green"; contex.fillRect(50, 50, 350, 200); contex.stroke(); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Example-2:
<!DOCTYPE html> < html > < head > < title > HTML canvas fillStyle property </ title > </ head > < body > < canvas id = "GFG" width = "500" height = "300" > </ canvas > < script > var x = document.getElementById("GFG"); var contex = x.getContext("2d"); var gr = contex.createLinearGradient(50, 0, 350, 0); gr.addColorStop(0, "green"); gr.addColorStop(1, "white"); contex.fillStyle = gr; contex.fillRect(50, 50, 350, 200); contex.stroke(); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Example-3:
<!DOCTYPE html> < html > < head > < title > HTML canvas fillStyle property </ title > </ head > < body > < canvas id = "GFG" width = "500" height = "300" > </ canvas > < script > var x = document.getElementById("GFG"); var contex = x.getContext("2d"); var gr = contex.createLinearGradient(0, 100, 0, 200); gr.addColorStop(0, "green"); gr.addColorStop(1, "yellow"); contex.fillStyle = gr; contex.fillRect(50, 50, 350, 200); contex.stroke(); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera