lineWidth property

Gets or sets the current line width, in pixels.

HTML Canvas 2D Context, Section 6

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