title: Complete Canvas is filled on fill command
body: <p>I'm really not sure what is wrong on this one so I will post all of the code on the bottom.</p>
  
  <p>I've started trying to make a simple animation program <a href="http://www.theanimator.co.uk" rel="nofollow noreferrer">like this</a>, but whenever I try to draw a frame it instead fills the whole canvas. </p>
  
  <p>Here is the code</p>
  
  <p>You should probably clear the board before testing the function, too.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Drawing&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;canvas id="container" width="500" height="500" style="border: 3px solid black"&gt;&lt;/canvas&gt;&lt;br&gt;
    &lt;button onClick="colorChange()"&gt;Change the color&lt;/button&gt;
    &lt;button onClick="colorChange('erase')"&gt;Eraser&lt;/button&gt;
    &lt;button onClick="colorChange('pen')"&gt;Pen&lt;/button&gt;
    &lt;button onClick="bcClear('clear')"&gt;Clear&lt;/button&gt;
    &lt;button onClick="bcClear()"&gt;Change Background&lt;/button&gt;&lt;br&gt; Width: &lt;input type="range" min="5" max="100" value="10" step="5" onChange="chWidth(this.value)" /&gt;
    &lt;!--New method -- this object --&gt;
    &lt;button onClick="drawFrame()"&gt;Draw frame&lt;/button&gt;
    &lt;script&gt;
      //variables for drawing
      var width = 10,
        color = "black",
        bc = "white";
      var cel = document.getElementById("container");
      var canvas = cel.getContext("2d");
      var clickd = false; //if clicked
  
      //variables for animating
      frame = 0;
      frames = [
        []
      ]; //frames: [ [frame1 circles, seperate by space] [frame2] ]
  
      //events
      cel.addEventListener("mousedown", function(e) {
        clickd = true;
        drawSomething(e);
      }, false); //draw dot, make clicking true for dragging
      cel.addEventListener("mouseup", function(e) {
        clickd = false;
      }, false); //stop drawing
      cel.addEventListener("mousemove", drawSomething, false); //\/
  
      //draw
      function drawSomething(event) {
        if (clickd) { //if u are dragging
          canvas.beginPath();
          var newX = event.clientX - cel.getBoundingClientRect().left;
          var newY = event.clientY - cel.getBoundingClientRect().top;
          canvas.arc(newX, newY, width, 0, 2 * Math.PI);
          canvas.fill(); //make circle
          frames[frame].push(newX + " " + newY);
        }
      }
  
      //clear, background color
      function bcClear(param) {
        if (confirm("This will erase everything on the board, OK?")) {
          if (!param) {
            bc = prompt("What do you want the background color to be?", "CSS colors only");
          }
          canvas.fillStyle = bc;
          canvas.rect(-3, -3, cel.offsetWidth, cel.offsetHeight);
          canvas.fill();
          canvas.fillStyle = color;
        }
      }
  
      //change color
      function colorChange(param) {
        if (param == 'erase') {
          canvas.fillStyle = bc;
        } else if (param == 'pen') {
          canvas.fillStyle = color;
        } else {
          color = prompt("What color would you like?", "CSS colors only");
          canvas.fillStyle = color;
        }
      }
  
      //Change width
      function chWidth(newWidth) {
        width = newWidth;
      }
  
      //draw a certain frame
      function drawFrame() {
        for (var i = 0; i &lt; frames[frame].length; i++) {
          var coords = frames[frame][i].split(" ");
          console.log(coords);
          canvas.arc(coords[0], coords[1], width, 0, 2 * Math.PI);
          canvas.fill();
        }
      }
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>