Skip to content
Related Articles

Related Articles

Improve Article
HTML | canvas stroke() Method
  • Last Updated : 08 Mar, 2021

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 :