HTML canvas stroke() Method

The stroke() method of the HTML canvas is used to draw the path. This path is drawn with moveTo() and lineTo() method. The <canvas> element allows you to draw graphics on a web page using JavaScript. Every canvas has two elements that describes the height and width of the canvas i.e. height and width respectively.

Following is the syntax −


Let us now see an example to implement the stroke() method of canvas −


 Live Demo

<!DOCTYPE html>
<canvas id="newCanvas" width="450" height="350" style="border:2px solid red;">
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.moveTo(100, 200);
   ctx.lineTo(100, 100);
   ctx.strokeStyle = "blue";
   ctx.moveTo(30, 30);
   ctx.lineTo(20, 100);
   ctx.lineTo(70, 100);
   ctx.strokeStyle = "orange";