HTML5 Canvas Reference - lineWidth

lineWidth (default = 1.0) gets and sets the thickness of the line.

Browser compatibility


`lineWidth`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.lineWidth=number;

Property Values

Value	Description
number	The current line width, in pixels. Default to 1

Example

The following code draws a rectangle with a line width of 10 pixels:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.lineWidth = 10;<!--from   w ww. j a v  a  2  s.com-->
    ctx.strokeRect(20, 20, 100, 100);
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code sets the line width for an arc.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="150"></canvas>
<script>
   canvas  = document.getElementById("myCanvas"); 
   ctx = canvas.getContext("2d");
    ctx.beginPath();<!--  www  .  ja  v a 2s.c om-->
    ctx.arc(95, 50, 40, 2.6, 2.6 * Math.PI);
    ctx.lineWidth = 10;
    ctx.stroke();
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code changes the line width when drawing different lines.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="150"></canvas>
<script>
   canvas  = document.getElementById("myCanvas"); 
   context = canvas.getContext("2d");
<!--from w w  w  .  j ava2 s  . com-->
    context.beginPath();
    context.moveTo(10, 10);
    context.lineTo(50, 10);
    context.lineWidth = 2;
    context.moveTo(10, 50);
    context.lineTo(50, 50);
    context.lineWidth = 2;
    context.stroke();
    context.beginPath();
    context.lineWidth = 15;
    context.moveTo(10, 30);
    context.lineTo(50, 30);
    context.stroke();
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code changes the line width as drawing on the canvas.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var context = canvas.getContext('2d');
  <!--  w  w w  .  j  a va 2 s. c o  m-->
  context.lineWidth = 5; // Make lines thick
  
  context.strokeStyle = "rgb(255, 0, 0)";
  context.strokeRect(40, 40, 100, 100); // Red square
  context.strokeRect(180, 40, 100, 100); // Red square
  
  context.lineWidth = 20; // Make lines even thicker
  
  context.strokeStyle = "rgb(0, 0, 0)";
  context.strokeRect(320, 40, 100, 100); // Black square
  
  context.lineWidth = 5; // Make lines thick
  
  context.strokeStyle = "rgb(255, 0, 0)";
  context.beginPath();
  context.moveTo(40, 180);
  context.lineTo(420, 180); // Red line
  context.closePath();
  context.stroke();
  
  context.lineWidth = 20; // Make lines even thicker
  
  context.strokeStyle = "rgb(0, 0, 0)";
  context.beginPath();
  context.moveTo(40, 220);
  context.lineTo(420, 220); // Black line
  context.closePath();
  context.stroke();

</script>
</body>
</html>

The code above is rendered as follows:

Example 5

The following code changes the line width in a loop.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
  <!--from   ww w. j a  v a  2s. co  m-->
    var points = [null, null, null];
    for(var i=0; i<24; i++){
        var width = 0.5 + i/2;
        var m = 200;
        var x = Math.cos(i/4) * 120;
        var y = Math.sin(i/4) * 180;
        points[0] = points[1];
        points[1] = points[2];
        points[2] = { X:x, Y:y};
        if(points[0] == null)
            continue;
        var px0 = (points[0].X + points[1].X) / 2;
        var py0 = (points[0].Y + points[1].Y) / 2;
        var px1 = (points[1].X + points[2].X) / 2;
        var py1 = (points[1].Y + points[2].Y) / 2;
        ctx.beginPath();
        ctx.lineWidth = width;
        ctx.strokeStyle = "rgba(0,0,0,0.5)";
        ctx.moveTo(m+px0,m+py0);
        ctx.lineTo(m+points[1].X,m+points[1].Y);
        ctx.lineTo(m+px1,m+py1);
        ctx.stroke();
    }

</script>
</body>
</html>

The code above is rendered as follows: