我怎么才能打印图案而不填充里面呢？

<canvas id="myCanvas"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  ctx.fillStyle = "transparent";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  
  // 绘制图案的代码
  
  ctx.stroke();
</script>

<div class="pattern"></div>

<style>
  .pattern {
    width: 200px;
    height: 200px;
    background-image: url('pattern.png');
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid black;
  }
</style>