<link rel="match" href="reference/canvas-stroke-styles.html" />
<canvas id="canvas" width="400" height="350"></canvas>
<style>
  #canvas {
    border: 1px solid black;
  }

  body {
    background: white;
  }
</style>
<script>

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

// Line styles
ctx.lineWidth = 10;

// Butt cap (default)
ctx.lineCap = 'butt';
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(100, 30);
ctx.stroke();

// Butt cap, zero length path
ctx.beginPath();
ctx.moveTo(120, 30);
ctx.lineTo(120, 30);
ctx.stroke();

// Round cap
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(20, 75);
ctx.lineTo(100, 75);
ctx.stroke();

// Round cap, zero length path
ctx.beginPath();
ctx.moveTo(120, 75);
ctx.lineTo(120, 75);
ctx.stroke();

// Square cap
ctx.lineCap = 'square';
ctx.beginPath();
ctx.moveTo(20, 120);
ctx.lineTo(100, 120);
ctx.stroke();

// Square cap, zero length path
ctx.beginPath();
ctx.moveTo(120, 120);
ctx.lineTo(120, 120);
ctx.stroke();

// Open path
ctx.lineCap = 'butt';
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(250, 50);
ctx.lineTo(200, 100);
ctx.lineTo(150, 50);
ctx.stroke();

// Closed path with round lineJoin
ctx.lineCap = 'butt';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(300, 50);
ctx.lineTo(350, 100);
ctx.lineTo(250, 100);
ctx.lineTo(300, 50);
ctx.closePath();
ctx.stroke();

// Miter limit test.
ctx.lineWidth = 5;
ctx.lineJoin = 'miter';
ctx.beginPath();
ctx.moveTo(380, 100);
ctx.lineTo(385, 20);
ctx.lineTo(390, 100);
ctx.stroke();

ctx.miterLimit = 20;
ctx.beginPath();
ctx.moveTo(380, 230);
ctx.lineTo(385, 150);
ctx.lineTo(390, 230);
ctx.stroke();

// Different angles, butt caps
ctx.lineCap = 'butt';
ctx.lineWidth = 5;

let centerX = 100;
const centerY = 230;
const innerRadius = 50;
const outerRadius = 80;

for (let angle = 0; angle < 360; angle += 15) {
  const radians = angle * Math.PI / 180;
  const startX = centerX + innerRadius * Math.cos(radians);
  const startY = centerY + innerRadius * Math.sin(radians);
  const endX = centerX + outerRadius * Math.cos(radians);
  const endY = centerY + outerRadius * Math.sin(radians);

  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
}

// Circles with different dashes
let dashes = [
  [15, 3, 3, 3, 3, 3, 3, 3],
  [1],
  [12, 3, 3],
];
for (let r = innerRadius - 10, i = 0; r >= 10; r -= 10, i++) {
  ctx.beginPath();
  ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.setLineDash(dashes[i % dashes.length]);
  ctx.lineDashOffset = (r - 30) / 2;
  ctx.stroke();
}
ctx.setLineDash([]);
ctx.lineDashOffset = 0;

// Different angles, round caps
ctx.lineCap = 'round';
ctx.lineWidth = 5;

centerX = 280;

for (let angle = 0; angle < 360; angle += 15) {
  const radians = angle * Math.PI / 180;
  const startX = centerX + innerRadius * Math.cos(radians);
  const startY = centerY + innerRadius * Math.sin(radians);
  const endX = centerX + outerRadius * Math.cos(radians);
  const endY = centerY + outerRadius * Math.sin(radians);

  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
}

// Non-closed path, first filled, then stroked

ctx.fillStyle = "gray";
ctx.beginPath();
ctx.moveTo(centerX - 30, centerY);
ctx.lineTo(centerX, centerY + 30);
ctx.lineTo(centerX + 30, centerY + 15);
ctx.fill();

ctx.beginPath();
ctx.moveTo(centerX - 30, centerY);
ctx.lineTo(centerX, centerY + 30);
ctx.lineTo(centerX + 30, centerY + 15);
ctx.stroke();

</script>