HTML | canvas strokeStyle Property

Last Updated : 30 Apr, 2019

The canvas strokeStyle property is used to set or return the stroke of color, gradient, or pattern used in the drawing.

Syntax:

context.strokeStyle=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: This example uses canvas strokeStyle property to set the stroke color to green.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas strokeStyle property 
    </title> 
</head> 
  
<body> 
    <canvas id="GFG" width="500" height="300"></canvas> 
      
    <!-- Script to uses canvas strokeStyle property -->
    <script> 
        var x = document.getElementById("GFG"); 
        var contex = x.getContext("2d"); 
          
        // Create rectangle 
        contex.rect(50, 50, 350, 200); 
          
        // Set stroke color 
        contex.strokeStyle = "green"; 
          
        // Set stroke width 
        contex.lineWidth = "10"; 
          
        contex.stroke(); 
    </script>  
</body> 
  
</html>                     

Output:

Example 2: This example uses canvas strokeStyle property to set the stroke color using linear gradient.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas strokeStyle property 
    </title> 
</head> 
  
<body> 
    <canvas id="GFG" width="500" height="300"></canvas> 
      
    <!-- Script to uses canvas strokeStyle property -->    
    <script> 
        var x = document.getElementById("GFG"); 
        var contex = x.getContext("2d"); 
          
        // Create linear gradient 
        var gr = contex.createLinearGradient(0, 0, 350, 200); 
          
        // Set color and position in a gradient object 
        gr.addColorStop("0", "green"); 
        gr.addColorStop("0.7", "yellow"); 
        gr.addColorStop("1.0", "blue"); 
          
        // Set stroke style to gradient 
        contex.strokeStyle = gr; 
          
        // Set line width 
        contex.lineWidth = 5; 
          
        // Create rectangle 
        contex.rect(50, 50, 350, 200); 
          
        contex.stroke(); 
    </script>  
</body> 
  
</html>                     

Output:

Supported Browsers: The browsers supported by canvas strokeStyle property are listed below:

Google Chrome
Internet Explorer 9.0
Firefox
Safari
Opera

My Personal Notes

Related Articles