HTML5 Canvas Reference - strokeStyle

strokeStyle defines the color or style that will be used for lines and around shapes.

Browser compatibility


`strokeStyle`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.strokeStyle=color|gradient|pattern;

Property Values

Value	Description
color	A CSS color value. Default value is #000000
gradient	A linear or radial gradient object
pattern	A pattern object

Example

The following code sets the stroke style to red color.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
<!--from   w ww . j  a  v  a2  s  .c  om-->
    ctx.strokeStyle = "red";
    ctx.strokeRect(20, 20, 150, 100);

</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code uses linear gradient object to paint rectangle.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
<!--from w  w w  . java  2  s .  c om-->
    var gradient = ctx.createLinearGradient(0, 0, 170, 0);
    gradient.addColorStop("0", "yellow");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");
    
    // Fill with gradient
    ctx.strokeStyle = gradient;
    ctx.lineWidth = 50;
    ctx.strokeRect(20, 20, 150, 100);

</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code uses linear gradient object to draw text.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var ctx = document.getElementById("canvas").getContext("2d");
<!--   ww w  . ja  v  a  2  s  .c o m-->
    var gradient = ctx.createLinearGradient(0, 0, 170, 0);
    gradient.addColorStop("0", "yellow");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");
    
    // Fill with gradient
    ctx.strokeStyle = gradient;
    ctx.lineWidth = 2;
    ctx.font = "30px Verdana";
    ctx.strokeText("java2s.com", 10, 50);

</script>
</body>
</html>

The code above is rendered as follows: