HTML canvas stroke() Method

HTMLWeb DevelopmentFront End Technology

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";


Updated on 30-Jul-2019 22:30:26