HTML | canvas fillStyle Property

Last Updated : 29 Apr, 2019

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> 

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> 

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> 

Output:

Supported Browsers:

Google Chrome
Internet Explorer 9.0
Firefox
Safari
Opera

My Personal Notes

Related Articles