Stroke

Next ❯Gradient

To design the stroke

  • turned_in_notStroke Related Methods & Properties
    • setLineDash()
    • getLineDash()
    • lineWidth
    • lineDashOffset
    • lineCap
    • lineJoin
    • miterLimit


setLineDash( )

Used to set the outline dash style, default stroke style is solid line with no gaps

  • Must be declared before the stroke() or strokeText()or strokeRect()

Syntax

ctx.setLineDash([line1, gap1, line2, gap2, ...., lineN, gapN])

The parameter is an Array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units)


If the number of elements in the array is odd, the elements of the array get copied and concatenated.For example : 
[5] will become [5,5]
[5,10,12] will become [5,10,12,5,10,12]
If the array is empty, the line dash list is cleared and line strokes return to being solid.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.setLineDash([]);
ctx.beginPath();ctx.moveTo(20,20);ctx.lineTo(180,20);ctx.stroke();
ctx.setLineDash([5]);
ctx.beginPath();ctx.moveTo(20,30);ctx.lineTo(180,30);ctx.stroke();
ctx.setLineDash([5,2,10,4]);
ctx.beginPath();ctx.moveTo(20,40);ctx.lineTo(180,40);ctx.stroke();
setLineDashsubject
setLineDashclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.setLineDash([]);
  ctx.beginPath();ctx.moveTo(20,20);ctx.lineTo(180,20);ctx.stroke();
  ctx.setLineDash([5]);
  ctx.beginPath();ctx.moveTo(20,30);ctx.lineTo(180,30);ctx.stroke();
  ctx.setLineDash([5,2,10,4]);
  ctx.beginPath();ctx.moveTo(20,40);ctx.lineTo(180,40);ctx.stroke();
</script>
</body>
</html>


getLineDash( )

Used to get the last outline dash style set by setLineDash()

Syntax

ctx.getLineDash()

Example

ctx.setLineDash([5,2,10,4]);
alert(ctx.getLineDash()) // outputs: 5,2,10,4


lineWidth

Used to set or get the stroke line width in pixels, default width is 1px

  • Stroke width divided & drawn 50% above & 50% below the stroke coordinate points
  • Must be declared before the stroke() or strokeText()or strokeRect()

Syntax - To set stroke line width

ctx.lineWidth=width

Syntax - To get stroke line width

ctx.lineWidth

Yellow line is the stroke when lineWidth=1, shows how width divides

lineWidth = 10
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(20,20,100,50);
ctx.lineWidth=10;
ctx.stroke();
lineWidthsubject
lineWidthclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.rect(20,20,100,50);
  ctx.lineWidth=10;
  ctx.stroke();
</script>
</body>
</html>


lineDashOffset

Used to move your outline negative or positive directions along their axis, default value is 0

  • Must be declared before the stroke() or strokeText()or strokeRect()

Syntax - To set stroke lineDashOffset

ctx.lineDashOffset=number

Syntax - To get stroke lineDashOffset

ctx.lineDashOffset

lineDashOffset = 4
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.setLineDash([10,4,4,5]);
ctx.lineWidth=5;
ctx.lineDashOffset=4;
ctx.strokeRect(60,10,80,80);
lineDashOffsetsubject
lineDashOffsetclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.setLineDash([10,4,4,5]);
  ctx.lineWidth=5;
  ctx.lineDashOffset=4;
  ctx.strokeRect(60,10,80,80);
</script>
</body>
</html>


lineCap

Used to set or get the stroke end type, default type is 'butt'

  • Must be declared before the stroke() or strokeText()or strokeRect()

* The distance that the stroke goes beyond the path is half of the stroke lineWidth

Syntax - To set stroke end type

ctx.lineCap="butt|round|square"

Syntax - To get stroke end type

ctx.lineCap
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.moveTo(20,20);ctx.lineTo(20,80);ctx.lineTo(120,80);
ctx.lineWidth=10;
ctx.lineCap="round";
ctx.stroke();
lineCapsubject
lineCapclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.moveTo(20,20);ctx.lineTo(20,80);ctx.lineTo(120,80);
  ctx.lineWidth=10;
  ctx.lineCap="round";
  ctx.stroke();
</script>
</body>
</html>


lineJoin

Used to set or get the stroke joint corner type, default type is 'miter'

  • Must be declared before the stroke() or strokeText()or strokeRect()


* Yellow line is the stroke when stroke-width:1, shows how width divides

Syntax - To set stroke joint corner type

ctx.lineJoin="miter|round|bevel"

Syntax - To get stroke joint corner type

ctx.lineJoin
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(20,20,100,50);
ctx.lineWidth=10;
ctx.lineJoin="round";
ctx.stroke();
lineJoinsubject
lineJoinclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.rect(20,20,100,50);
  ctx.lineWidth=10;
  ctx.lineJoin="round";
  ctx.stroke();
</script>
</body>
</html>


miterLimit

Used to set or get the maximum 'miter' length value of 'lineJoin' property , after exceeding the miterLimt value, 'lineJoin' property type behave like 'bevel', default value is 10

  • miter length is the distance between the inner & outer joint corners (at lineWidth=1), lesser the angle more the miter length
  • Must be declared before the stroke()

Syntax - To set stroke miterLimit

ctx.miterLimit=number

Syntax - To get stroke miterLimit

ctx.miterLimit

blue-line shows the 'miterLimit' & red-line shows the inner & outer joint corners

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.moveTo(50,20);ctx.lineTo(50,80);ctx.lineTo(100,30);
ctx.lineWidth=10;
ctx.miterLimit=1;
ctx.stroke();
miterLimitsubject
miterLimitclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.moveTo(50,20);ctx.lineTo(50,80);ctx.lineTo(100,30);
  ctx.lineWidth=10;
  ctx.miterLimit=1;
  ctx.stroke();
</script>
</body>
</html>


  • Gradient
❮ Prev Color
Next ❯Gradient
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯