Windows apps
Collapse the table of content
Expand the table of content
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.

strokeStyle property

Gets or sets the current style that is used for strokes (lines) on shapes.

This property is read/write.

HTML Canvas 2D Context, Section 5Internet Explorer 9

 

Syntax

JavaScript

object.strokeStyle = color

color = object.strokeStyle

 

Property values

Type: any

A variable that specifies or receives one of the following:

CSS Color
CanvasGradient
CanvasPattern

Exceptions

ExceptionCondition
SecurityError

The p attribute is set to aCanvasPattern object that was created from a img or video element that is not of the same origin or domain as the document that owns the canvas element.

 

Standards information

Remarks

The style can consist of a parameter that contains a CSS color, CanvasGradient object, or CanvasPattern object.

Examples

The following code example uses strokeStyle to change the colors of three subpaths.

Results image of code sample showing a smiley face using three subpaths.


<html>
<head>
  <title>StrokeStyle example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.beginPath();
              ctx.strokeStyle = "green";  // Use strokeStyle to set the color.
              ctx.rect(5, 5, 300, 250);
              ctx.stroke();
              ctx.beginPath();
              ctx.strokeStyle = "blue";  // Use strokeStyle to change the color.
              ctx.lineWidth = "5";
              ctx.moveTo(100, 100);
              ctx.lineTo(130, 100);
              ctx.moveTo(170, 100);
              ctx.lineTo(200, 100);
              ctx.stroke();
              ctx.beginPath();
              ctx.strokeStyle = "red";  // Use strokeStyle to change the color.
              ctx.arc(150, 125, 100, 0, Math.PI, false);
              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:
© 2017 Microsoft