Export (0) Print
Expand All

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:
© 2014 Microsoft