title: Why won't my canvas clear
body: <p>I have a canvas that I draw a rect on that I want to clear from the screen when a condition is met, the condition fires but does not clear the rect from the screen. What am I doing wrong? I should also mention that I redraw the rects a couple times because they are draggable, not sure if that makes a difference. So far I have tried:</p>
  
  <pre><code>this.ctx.clearRect(this.ctx.rect.startX, this.ctx.rect.startY, this.ctx.rect.w, this.ctx.rect.h);
  
  this.ctx.clearRect(0, 0, this.ctx.rect.w, this.ctx.rect.h);
  </code></pre>
  
  <h1>draw rect on double click</h1>
  
  <pre><code>dclick: function (e) {
              e.preventDefault();
              this.ctx.rect = {
                  startX: 25,
                  startY: 100,
                  w: (this.canvas.width - 50),
                  h: 300,
              }
              this.draw();
  </code></pre>
  
  <h1>HTML</h1>
  
  <p></p>
  
  <pre><code>    &lt;div class="cv"&gt;
          &lt;canvas  v-on:mousedown="mouseDown" v-on:mousemove="mouseMove" v-on:mouseup="mouseUp" v-on:dblclick="dclick" :id="'cv' + emp.id" class="canvas"  width="150" height="700"&gt;&lt;/canvas&gt;
          &lt;canvas  class="back" :id="'back' + emp.id"   width="150" height="700"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <h1>draw:</h1>
  
  <pre><code>function () {
  
              for (let  i = 0; i &lt; this.st; i+=this.ic) {
                  this.ctx.beginPath();
                  this.ctx.moveTo(0, i);
                  this.ctx.lineTo(500, i);
                  this.ctx.stroke();
                  this.ctx.closePath(); 
                  this.ctx.fillStyle = "#222222";
                  this.ctx.fillRect(this.ctx.rect.startX, this.ctx.rect.startY, this.ctx.rect.w, this.ctx.rect.h);
                  this.drawHandles();
              }
          },
  </code></pre>
  
  <h1>vue watcher to clear rect</h1>
  
  <pre><code>this.save();
  this.ctx.clearRect(0, 0, canvas.width, canvas.height);
  this.draw();'
  </code></pre>
  
  <h1>Pen</h1>
  
  <p>Here is a Pen of whats happening. The rect clears but doesn't stay cleared. The box should be draggable vertically and should clear and stayed cleared when the button is clicked. To make the box appear you must double click the canvas.
  <a href="https://codepen.io/tjquinn/pen/BYZQqo" rel="nofollow noreferrer">https://codepen.io/tjquinn/pen/BYZQqo</a></p>