HTML canvas stroke() Method Last Updated : 09 Jun, 2023 Improve Improve Like Article Like Save Share Report 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 context = x.getContext("2d"); context.rect(50, 50, 350, 200); context.fillStyle = "green"; context.fill(); // Draw the path context.stroke(); </script> </body> </html> Output: 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 context = x.getContext("2d"); context.beginPath(); context.moveTo(50, 50); context.lineTo(50, 250); context.lineTo(250, 250); context.lineTo(250, 50); context.strokeStyle = "green"; context.stroke(); </script> </body> </html> Output: Supported Browsers: Google Chrome Internet Explorer 9.0 Firefox Safari Opera Like Article Suggest improvement Previous HTML canvas fill() Method Next HTML canvas beginPath() Method Share your thoughts in the comments Add Your Comment Please Login to comment...