title: How to clear an HTML canvas?
body: <p>I'm trying to implement a clear button but it doesn't seem to be working.</p>
  
  <p>I have an array of x, y, and drag positions along with the associated colors. When the clear button is pressed (and it is, I checked with an alert box), I am clearing all of these arrays and then clearing the canvas like so:</p>
  
  <pre><code>clickX.length = 0;
  clickY.length = 0;
  clickDrag.length = 0;
  clickColor.length = 0;
  var context = $('#canvas')[0].getContext('2d');
  context.width = context.width;
  context.height = context.height;
  </code></pre>
  
  <p>I heard setting the width and height may be slower so I always tried:</p>
  
  <pre><code>context.clearRect(0, 0, context.width, context.height);
  </code></pre>
  
  <p>However, none of these seem to be working. The arrays are emptied but the prior contents of the canvas just remain stuck there. Not sure why they aren't being cleared.</p>
  
  <p>Thanks for reading.</p>