title: Buttons not working on html canvas
body: <p>I am finding it hard to get my buttons working inside a html canvas. I think that the onclick event is not being called or the canvas is over layed and drawing over them but I can't figure out why. I have tried putting the buttons on a higher z-index as demonstrated here </p>
  
  <p><a href="https://stackoverflow.com/questions/4797748/can-i-put-an-html-button-inside-the-canvas">Can I put an HTML button inside the canvas?</a></p>
  
  <p>but I have had no avail. Here is the code for the canvas and button</p>
  
  <pre><code>&lt;canvas id="whiteboard" style="z-index:1; position: absolute; left: 0px; top: 0px;"&gt;&lt;/canvas&gt;
  &lt;input type="button" style="z-index: 2" value="blue" id="blue" onclick="colorChange('#0000FF');" /&gt;
  </code></pre>
  
  <p>here is the script tag</p>
  
  <pre><code>&lt;script src="assets/js/color.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and the function I am trying to call in color.js</p>
  
  <p><code>function colorChange(color) {
      alert("adadadsdasd");
      var c = document.getElementById('whiteboard');
      var ctx = c.getContext("2d");
      ctx.fillStyle = color;
  }</code></p>
  
  <p>I am fairly new to JS so I apologise if there is any rookie errors.</p>