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