title: jCanvas's clearCanvas does not seem to work with layers
body: <p>I've organized my jCanvas code into a render method which fires on window.resize:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var middleX;
      var middleY;
      var canvas;
      var ctx;
  
      var isLoaded = false;
  
      $(document).ready
      (
          function ()
          {
              init();
              isLoaded = true;
  
              render();
  
              $("canvas").fadeIn(2000);
          }
      );
  
      function scaleToWindowDimensions()
      {
          ctx.canvas.width = window.innerWidth;
          ctx.canvas.height = window.innerHeight;
  
          middleX = $canvas.width() / 2;
          middleY = $canvas.height() / 2;
      }
  
      function init()
      {
          $canvas = $('canvas');
          ctx = document.getElementById("canvas").getContext("2d");
  
          scaleToWindowDimensions();
      }
  
      $(window).resize
      (
          function ()
          {
              scaleToWindowDimensions();
  
              render();
          }
      );
  
      function render()
      {
          if (!isLoaded)
          {
              return;
          }
  
          $canvas.clearCanvas();
  
          // ctx.clearRect(0, 0, $canvas.width(), $canvas.height());
  
          $canvas.addLayer({
              method: 'drawArc',
              strokeStyle: "#000",
              strokeWidth: 1,
              fillStyle: '#c33',
              x: middleX,
              y: middleY,
              closed: true,
              radius: 50,
              // Event bindings
              mousedown: function (target)
              {
                  alert('You pushed RED!');
              },
              mouseup: function (target)
              {
                  target.fillStyle = '#c33';
              },
              mouseover: function (target)
              {
                  target.fillStyle = "#888";
              },
              mouseout: function (target)
              {
                  target.fillStyle = "#c33";
              }
          });
  
          $canvas.addLayer({
              method: "drawText",
              strokeStyle: "#000",
              fromCenter: true,
              strokeWidth: 1,
              fillStyle: "#333",
              fontSize: "18pt",
              fontFamily: "Verdana",
              x: middleX,
              y: middleY,
              text: "Man",
              data: { "id": 1, "word": "Man" },
              mousedown: function (target)
              {
                  alert($(this).id);
              }
          });
  
          $canvas.addLayer({
              method: 'drawArc',
              strokeStyle: "#000",
              strokeWidth: 1,
              fillStyle: '#d88',
              x: 500,
              y: 100,
              closed: true,
              radius: 40,
              // Event bindings
              mousedown: function (target)
              {
                  alert('You pushed RED!');
                  target.fillStyle = '#333';
              },
              mouseup: function (target)
              {
                  target.fillStyle = '#d88';
              },
              mouseover: function (target)
              {
                  target.fillStyle = "#888";
              },
              mouseout: function (target)
              {
                  target.fillStyle = "#d88";
              }
          });
  
          $canvas.addLayer({
              method: "drawText",
              strokeStyle: "#000",
              fromCenter: true,
              strokeWidth: 1,
              fillStyle: "#333",
              fontSize: "16pt",
              fontFamily: "Verdana",
              x: 500,
              y: 100,
              text: "Men",
              data: { "id": 2, "word": "Men" },
              mousedown: function (target)
              {
                  alert($(this).id);
              }
          });
  
          $canvas.addLayer({
              method: 'drawLine',
              strokeStyle: "#222",
              strokeWidth: 1,
              x1: middleX,
              y1: middleY,
              x2: 500,
              y2: 100,
              radius: 40,
          });
  
          $canvas.drawLayers();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This draws this image:</p>
  
  <p><img src="https://i.stack.imgur.com/cB8X8.png" alt="Output"></p>
  
  <p>The intent is for the first step when render is called to clear the entire canvas:</p>
  
  <pre><code>$canvas.clearCanvas();
  
  // ctx.clearRect(0, 0, $canvas.width(), $canvas.height());
  </code></pre>
  
  <p>These are two separate attempts to clear the canvas, neither of which works. Without the canvas being cleared, the result is this:</p>
  
  <p><img src="https://i.stack.imgur.com/0MJZv.png" alt="enter image description here"></p>
  
  <p>I have a general idea that this has something to do with the layers rather than drawing directly, but I'm baffled why the canvas is not being cleared...</p>
  
  <p>TIA.</p>