Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

lineWidth property

Gets or sets the current line width, in pixels.

HTML Canvas 2D Context, Section 6Internet Explorer 9

 

Syntax

JavaScript

p = object.lineWidth

 

Property values

Type: number

1

Default.

A positive number

The line width, in pixels.

Standards information

Examples

The following code example draws a series of lines by using increasing values for the lineWidth property.


<html>
<head>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              var lStart = 0;
              var lEnd = 200;
              var yStart = 5;
              for (i = 1; i < 16; i++) {
                  ctx.lineWidth = i;
                  ctx.beginPath();
                  yStart = yStart + (i * 2) + ctx.lineWidth;
                  ctx.moveTo(lStart, yStart);
                  ctx.lineTo(lEnd, yStart);
                  ctx.stroke();
                  ctx.textBaseline = "middle";
                  ctx.fillText(ctx.lineWidth, lEnd + 10, yStart);
              }
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="300" height="600">This browser or document mode doesn't support canvas</canvas> 
</body>
</html>


See also

CanvasRenderingContext2D

 

 

Show:
© 2015 Microsoft