Skip to content
Related Articles

Related Articles

HTML | canvas stroke() Method

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Mar, 2021
View Discussion
Improve Article
Save Article

The canvas stroke() method is used to draw the path you have defined with all those moveTo() and lineTo() methods. The default color of the canvas stroke() method is black.

Syntax: 

context.stroke()

Example-1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML canvas stroke() Method
    </title>
</head>
 
<body>
    <canvas id="GFG"
            width="500"
            height="300">
  </canvas>
 
    <script>
        var x =
            document.getElementById("GFG");
        var contex =
            x.getContext("2d");
        contex.rect(50, 50, 350, 200);
        contex.fillStyle = "green";
        contex.fill();
       
        // Draw the path
        contex.stroke();
    </script>
 
</body>
 
</html>

Output: 
 

canvas_fill

Example-2: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML canvas stroke() Method
    </title>
</head>
 
<body>
    <canvas id="GFG"
            width="500"
            height="300">
  </canvas>
 
    <script>
        var x =
            document.getElementById("GFG");
        var contex =
            x.getContext("2d");
        contex.beginPath();
        contex.moveTo(50, 50);
        contex.lineTo(50, 250);
        contex.lineTo(250, 250);
        contex.lineTo(250, 50);
        contex.strokeStyle = "green";
        contex.stroke();
    </script>
 
</body>
 
</html>

Output: 
 

Supported Browsers: 

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Opera

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!