title: Resizing a rectangle in a canvas element using slider values
body: <p>I want to be able to resize a rectangle on a canvas using a slider, while having these values display in two text boxes. I have this code working, but it keeps the old values visible on the canvas. I've tried using <code>clearRect()</code> before I call to <code>strokeRect()</code>, but that stopped my sliders from working.</p>
  
  <p>In short, I want to draw a rectangle to the canvas, and have it so that two sliders resize it, one for width, and one for height. I'm relatively new to coding, so I know I've probably made an obvious mistake!</p>
  
  <p>Here is my JS code for printing the values to the text boxes and drawing the rectangle:</p>
  
  <pre><code>$(function() {
     var c1=document.getElementById("c1");
     var ctx1=c2.getContext("2d");
     $( "#slider1" ).slider({
    value:100,
    min: 10,
    max: 500,
    step: 10,
    slide: function( event, ui ) {
      $( "#textBox1" ).val(ui.value + "cm");
      ctx1.strokeRect(0, 0,$( "#slider1" ).slider( "value" ), $( "#slider2").slider( "value" ) );
    }
    });
    $( "#slider2" ).slider({
    value:100,
    min: 10,
    max: 500,
    step: 10,
    slide: function( event, ui ) {
      $( "#textBox2" ).val(ui.value + "cm");
      ctx1.strokeRect(0, 0,$( "#slider1" ).slider( "value" ), $( "#slider2").slider("value"));
    }
    });
  $( "#textBox1" ).val($( "#slider1" ).slider( "value" ) + "cm");
  $( "#textBox2" ).val($( "#slider2" ).slider( "value" ) + "cm");
   });
  </code></pre>
  
  <p>And my HTML code:</p>
  
  <pre><code> &lt;div id="slider1" class="slider"&gt;&lt;/div&gt;
   &lt;input type="text" id="textBox1" class="sizeBox" value="100cm"&gt;
   &lt;label&gt;Height&lt;/label&gt;&lt;/input&gt;
   &lt;br&gt;
   &lt;div id="slider2" class="slider"&gt;&lt;/div&gt;
   &lt;input type="text" id="textBox2" class="sizeBox" value="100cm"&gt;
   &lt;label&gt;Width&lt;/label&gt;&lt;/input&gt;
   &lt;canvas id="c1"&gt;&lt;/canvas&gt;
  </code></pre>