HTML canvas stroke() Method
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
Last Updated :
09 Jun, 2023
Like Article
Save Article