title: html5-canvas draw a curve on movement of slider
body: <p>I am trying to draw quadratic curve on movement of slider. So as slider moves curve will be drawn. I want to do this for quadratic curve and also for bezier curve. This is my code it will work only in chrome</p>
  
  <pre><code>            &lt;!DOCTYPE HTML&gt;
                          &lt;html&gt;
                              &lt;head&gt;
                                  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
                                  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
                                  &lt;style type="text/css"&gt;
                                      .wrapper {
                                          margin: 0 auto;
                                          width: 1000px;
                                      }
                                      .canHdr {
                                          float: left;
                                          width: 450px;
                                          height: 400px;
                                          border: 1px solid red;
                                      }
                                  &lt;/style&gt;
  
                              &lt;/head&gt;
                              &lt;body&gt;
                                  &lt;form&gt;
                                      &lt;!-- wrapper --&gt;
                                      &lt;div class="wrapper"&gt;
  
                                          &lt;!-- canHdr --&gt;
                                          &lt;div id="canHdr" class="canHdr" &gt;
  
                                              &lt;p&gt;
                                                  This is my 1st div with quadratic curve I want to draw this curve as I move the slider. I want to make it dynamic so when I should be able to change the curve points. Also I want to move an object on that curve as I am doing in my 3rd div.
                                              &lt;/p&gt;
  
                                              &lt;div class="canOuterHdr" &gt;
                                                  &lt;canvas id="myCanvas1" width="300" height="195" style="position: relative;"&gt;
                                                      [No canvas support]
                                                  &lt;/canvas&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div id="slider1" class="newBg"&gt;
                                                  &lt;input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide1');" /&gt;
                                              &lt;/div&gt;
  
                                          &lt;/div&gt;
                                          &lt;!--/ canHdr --&gt;
                                          &lt;!-- canHdr2 --&gt;
                                          &lt;div id="canHdr2" class="canHdr" &gt;
  
                                              &lt;p&gt;
                                                  This is my 2nd div. I have bezier curve. I want to make it dynamic so when I should be able to change the curve points. Also I want to move an object on that curve as I am doing in my 3rd div.
                                              &lt;/p&gt;
  
                                              &lt;div class="canOuterHdr" &gt;
                                                  &lt;canvas id="myCanvas2" width="300" height="195" style="position: relative;"&gt;
                                                      [No canvas support]
                                                  &lt;/canvas&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div id="slider2" class="newBg"&gt;
                                                  &lt;input id="slide2" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide2');" /&gt;
                                              &lt;/div&gt;
  
                                          &lt;/div&gt;
                                          &lt;!-- canHdr2 --&gt;
  
  
                                      &lt;/div&gt;
                                      &lt;!-- /wrapper --&gt;
  
                                      &lt;script type="text/javascript"&gt;
                                         // newSprite('myCanvas3', 16, 170);
                                          quadraticCurve('myCanvas1', 18.8, 45, 28, 160, 228, 165);
                                          bezierCurve('myCanvas2', 20, 75, 55.2, 150.0, 200,100, 228, 165)
                                          function counterSlider(sID) {
  
                                              var slideVal = document.getElementById(sID).value;
                                              /*if (maxValue ==100){
  
                                               slideVal=slideVal/100;
                                               }*/
                                              slideVal = slideVal / 100;
  
                                              if (slideVal == 0) {
  
                                              /*  erase('myCanvas2');
                                                  erase('myCanvas3');
                                                  erase('myCanvas4');*/
                                                  //newSprite('myCanvas1b', 18.8, 45);
                                                 // newSprite('myCanvas3', 16, 170);
  
                                              } else if (slideVal &gt; 0 &amp;&amp; slideVal &lt;= 34) {
  
                                                  /*erase('myCanvas1');
                                                  //erase('myCanvas1b');
                                                  erase('myCanvas2');
                                                  erase('myCanvas3');
                                                  erase('myCanvas4');*/
  
                                              } else if (slideVal &gt; 34 &amp;&amp; slideVal &lt;= 67) {
  
                                                  /*erase('myCanvas1');
  
                                                  erase('myCanvas2');
                                                  erase('myCanvas3');
                                                  erase('myCanvas4');*/
  
                                              } else if (slideVal &gt; 67 &amp;&amp; slideVal &lt;= 100) {
  
                                                  /*erase('myCanvas1');
  
                                                  erase('myCanvas2');
                                                  erase('myCanvas3');
                                                  erase('myCanvas4');*/
  
                                              }
                                          }
  
                                          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;
  
                                          }
  
                                          /**********for backgroundImage********************/
  
                                          function quadraticCurve(canId, spx, spy, cpx, cpy, endx, endy) {
  
                                              var canvas = document.getElementById(canId);
                                              var ctx = canvas.getContext('2d');
  
                                              ctx.beginPath();
                                              ctx.moveTo(spx, spy);
                                              ctx.quadraticCurveTo(cpx, cpy, endx, endy);
                                              ctx.strokeStyle = "#eaca2d";
                                              ctx.stroke();
  
                                          }
  
                                          function bezierCurve(canId, spx, spy, cpx1, cpy1, cpx2, cpy2, endx, endy) {
  
                                              var canvas = document.getElementById(canId);
                                              var ctx = canvas.getContext('2d');
  
                                              ctx.beginPath();
                                              ctx.moveTo(spx, spy);
                                              ctx.quadraticCurveTo(cpx1, cpy1, cpx2, cpy2, endx, endy);
                                              ctx.strokeStyle = "#eaca2d";
                                              ctx.stroke();
  
                                          }
  
                                          function newSprite(canId, mvx, mvy) {
                                              var canvas = document.getElementById(canId);
                                              var ctx = canvas.getContext('2d');
                                              ctx.globalCompositeOperation = 'source-over';
                                              //ctx.globalCompositeOperation = "destination-over";
                                              ctx.beginPath();
                                              ctx.fillStyle = "#0077c1";
                                              ctx.arc(mvx, mvy, 6, 0, Math.PI * 2, true);
                                              ctx.closePath();
                                              ctx.fill();
                                          }
  
  
  
                                      &lt;/script&gt;
                                  &lt;/form&gt;
                              &lt;/body&gt;
                          &lt;/html&gt;
  </code></pre>
  
  <p>This is the link for jsfiddle: <a href="http://jsfiddle.net/Y5yYD/1/" rel="nofollow">http://jsfiddle.net/Y5yYD/1/</a></p>