Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

stroke method

Renders the strokes of the current subpath by using the current stroke styles.

HTML Canvas 2D Context, Section 9Internet Explorer 9

Syntax

CanvasRenderingContext2D.stroke();

Parameters

This method has no parameters.

Return value

This method does not return a value.

Standards information

Remarks

Use the beginPath method after you call the stroke method to close the existing path and start a new one with different properties.

Examples

The following code example uses stroke to render a rectangle and an arc.


<html>
<head>
  <title>Stroke example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.beginPath();
              ctx.rect(5, 5, 300, 250);
              ctx.stroke();
              // ctx.beginPath();  // Uncomment this line to remove the line between the rectangle and the arc.
              ctx.arc(150, 150, 100, 0, Math.PI, false); // Create the arc path.  
              ctx.stroke();
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="600">This browser or document mode doesn't support canvas</canvas> 
</body>
</html>


See also

CanvasRenderingContext2D

 

 

Show:
© 2014 Microsoft