title: Create a button out of a javascript canvas object
body: <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>function draw() {
    var canvas = document.getElementById('navigation');
    if(canvas.getContext) {
      var ctx = canvas.getContext('2d');
  
      ctx.beginPath();
      //shape 1
      ctx.moveTo(300, 1120);
      ctx.lineTo(230, 1070);
      ctx.lineTo(160, 880);
      ctx.lineTo(170, 770);
      ctx.lineTo(260, 640);
      ctx.lineTo(350, 710);
      ctx.lineTo(360, 820);
      //shape 2
      ctx.moveTo(340, 1050);
      ctx.lineTo(390, 820);
      ctx.lineTo(450, 710);
      ctx.lineTo(450, 810);
      ctx.fill();
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body onload="draw();"&gt;
      &lt;canvas id="navigation" width="1500" height="1500"&gt;&lt;/canvas&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've got this snippet of code, and I was wondering if it's possible to make Shape 1 and Shape 2 independently clickable buttons, each redirecting to a different webpage.</p>