Try it Yourself: Canvas Fill and Stroke

Canvas Fill and Stroke

<!DOCTYPE html>
<html>
<body>

<canvas id="fillVsStroke" width="320" height="140"></canvas>

<script>
  const ctx = document.getElementById("fillVsStroke").getContext("2d");

  ctx.beginPath();
  ctx.rect(20, 20, 100, 100);
  ctx.fillStyle = "mediumseagreen";
  ctx.fill();

  ctx.beginPath();
  ctx.rect(160, 20, 100, 100);
  ctx.strokeStyle = "mediumseagreen";
  ctx.lineWidth = 4;
  ctx.stroke();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="fillVsStroke" width="320" height="140"></canvas>

<script>
  const ctx = document.getElementById("fillVsStroke").getContext("2d");

  ctx.beginPath();
  ctx.rect(20, 20, 100, 100);
  ctx.fillStyle = "mediumseagreen";
  ctx.fill();

  ctx.beginPath();
  ctx.rect(160, 20, 100, 100);
  ctx.strokeStyle = "mediumseagreen";
  ctx.lineWidth = 4;
  ctx.stroke();
</script>

</body>
</html>