title: How to draw a tag icon in canvas?
body: <p>I'm trying to make a tag like icon in canvas, but having a hard time doing the punch hole in the middle with no lines.</p>
  <p>If possible, would like to make it like in the image, since here I tried with just basics shapes.
  Image Example:<br />
  <img src="https://i.stack.imgur.com/ikPPJ.png" alt="tag icon" /></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.rect(100, 30, 150, 100);
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.beginPath();
  ctx.translate(c.width/2,c.height/2);
  ctx.moveTo(0,0);
  ctx.lineTo(0,0-100);
  ctx.rotate(Math.PI / 3);
  ctx.lineTo(0,0-100);
  ctx.closePath();
  ctx.stroke();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="500" height="260" style="border:1px solid #d3d3d3;"&gt;</code></pre>
  </div>
  </div>
  </p>