Skip to content
Related Articles

Related Articles

HTML | canvas stroke() Method
  • Last Updated : 30 Apr, 2019

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

Syntax:

context.stroke()

Example-1:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas fillRect() 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:






<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas fillRect() 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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :