title: How to make a counter using a canvas in javascript
body: <p>I'm trying to make a counter so that every time you click your mouse it shows the number of clicks in the canvas.  But it isn't updating the canvas.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"&gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
  
  
  &lt;button onclick="function1()"&gt;Click Here&lt;/button&gt;
  
  &lt;script&gt;
  var animate = setInterval(window.requestAnimationFrame,1)
  
  var clicks = 0;
          function function1()
          {
          clicks++;
          document.getElementById('myCanvas').innerHTML = clicks;
          }; 
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.font="16px Verdana";
  ctx.fillText("Score: " + clicks,190,20);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>