title: html5-canvas javascript draw line with slider
body: <p>As I move my slider I am drawing an arc. I have made it dynamic. If I change the points of arc then the line drawn will also change. Same thing I want to do with a line. If I move my slider the line should get drawn. Also I want to make it dynamic means If i change the line points the line should also change. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;CH5EX10: Moving In A Simple Geometric Spiral &lt;/title&gt;
  
          &lt;style&gt;
              .wrapper {
                  margin: 0 auto;
                  width: 1000px;
              }
              .uppleft {
                  float: left;
                  width: 1000px;
                  position: relative;
                  margin: 0 0 500px 10px;
              }
              .dnleft {
                  float: left;
                  width: 1000px;
              }
              .clear {
                  clear: both;
              }
          &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="uppleft"&gt;
  
                  &lt;canvas id="canvasOne" width="300" height="300"width="500" height="500" style="position:absolute; left:5px; top:10px; border:1px solid red;"&gt;
                      Your browser does not support HTML5 Canvas.
                  &lt;/canvas&gt;
                  &lt;canvas id="canvasTwo" width="300" height="300" style="position:absolute; left:250px; top:30px; border:1px solid red;"&gt;
                      Your browser does not support HTML5 Canvas.
                  &lt;/canvas&gt;
              &lt;/div&gt;
  
              &lt;div class="clear"&gt;&lt;/div&gt;
  
              &lt;div class="dnleft"&gt;
                  &lt;input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSliderNew('slide1', '100');"/&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;script type="text/javascript"&gt;
          drawSlopeCurve2('canvasTwo', 16, 170, 200, 80)
  
          function counterSliderNew(sID, maxValue) {
  
              var slideVal = document.getElementById(sID).value;
              //alert(slideVal);
              if (maxValue == 100) {
                  slideVal = slideVal / 100;
              }
  
              if (slideVal == 0) {
  
              } else if (slideVal &gt; 0 &amp;&amp; slideVal &lt;= 34) {
                  erase('canvasOne');
                  drawBezier2('canvasOne', new Array({
                      x : 18.8,
                      y : 75
                  }, {
                      x : 28,
                      y : 160
                  }, {
                      x : 228,
                      y : 165
                  }), slideVal);
  
              } else if (slideVal &gt; 34 &amp;&amp; slideVal &lt;= 67) {
                  //alert(slideVal);
                  erase('canvasOne');
                  drawBezier2('canvasOne', new Array({
                      x : 18.8,
                      y : 75
                  }, {
                      x : 28,
                      y : 160
                  }, {
                      x : 228,
                      y : 165
                  }), slideVal);
                  staticGraph5('canvasTwo');
              } else if (slideVal &gt; 67 &amp;&amp; slideVal &lt;= 100) {
                  erase('canvasOne');
                  drawBezier2('canvasOne', new Array({
                      x : 18.8,
                      y : 75
                  }, {
                      x : 28,
                      y : 160
                  }, {
                      x : 228,
                      y : 165
                  }), slideVal);
  
              }
          }
  
          function drawBezier2(canId, points, slideVal) {
  
              var canvas = document.getElementById(canId);
  
              var context = canvas.getContext("2d");
              // Draw guides
              context.lineWidth = 2;
              context.strokeStyle = "rgb(113, 113, 213)";
              context.beginPath();
              // Label end points
              context.fillStyle = "rgb(0, 0, 0)";
              // Draw spline segemnts
              context.moveTo(points[0].x, points[0].y);
              for (var t = 0; t &lt;= slideVal; t += 0.1) {
                  context.lineTo(Math.pow(1 - t, 2) * points[0].x + 2 * (1 - t) * t * points[1].x + Math.pow(t, 2) * points[2].x, Math.pow(1 - t, 2) * points[0].y + 2 * (1 - t) * t * points[1].y + Math.pow(t, 2) * points[2].y);
              }
  
              // Stroke path
              context.stroke();
          }
  
          function erase(canvasId) {
  
              var canvas = document.getElementById(canvasId);
              var context = canvas.getContext("2d");
              context.beginPath();
              context.clearRect(0, 0, canvas.width, canvas.height);
              canvas.width = canvas.width;
  
          }
  
          function drawSlopeCurve2(canId, mvx, mvy, lnx, lny) {
              var canvas = document.getElementById(canId);
              var context = canvas.getContext('2d');
  
              context.beginPath();
              context.moveTo(mvx, mvy);
              context.lineTo(lnx, lny);
              context.lineWidth = 0.6;
              context.stroke();
          }
  
      &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This will work only in chrome. I want to use <code>drawSlopeCurve2('canvasTwo', 16, 170, 200, 80);</code> this function to draw a line on movement of slider. I am looking for some formula as I have used for moving an arc on slider movement.</p>