title: html5-canvas move the object on given points
body: <p>I want to move a object on a slanting line. I have given my code. In my code in my 3rd div as I move the slider I am drawing a slanting line on this line I want to move an object. Similar thing I am doing in my 1st div. Where I am moving an object on curve. I am looking for some function in which I will provide the points and the object will follow the points. Here is my code. This code works only in chrome as I am trying to make this only for safari and chrome browsers.</p>
  
  <pre><code>            &lt;!DOCTYPE HTML&gt;
          &lt;html&gt;
              &lt;head&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 bezier curve the curve is getting drawn as slider moves and also a ball in moving on that . 
                  &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
                  &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;!-- canHdr3 --&gt;
              &lt;div id="canHdr3" class="canHdr" &gt;
                  &lt;p&gt;
                      This is my 3rd div with slanting line. I want to move a ball on this line when I move the slider. So as the line increases ball will also move on the line.
                  &lt;/p&gt;
  
                  &lt;div class="canOuterHdr" &gt;
                      &lt;canvas id="myCanvas3" width="300" height="195" style="position: relative;"&gt;
                          [No canvas support]
                      &lt;/canvas&gt;
  
                  &lt;/div&gt;
  
                  &lt;div id="slider3" class="newBg"&gt;
                      &lt;input id="slide3" type="range" min="0" max="100" step="1" value="0" onchange=" drawSlopeCurve2('slide3','100'); " /&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;!--/ canHdr3 --&gt;
              &lt;!-- canHdr4 --&gt;
              &lt;div id="canHdr4" class="canHdr" &gt;
  
                  &lt;p&gt;
                      This is my 4th div with slanting line. I want to move a ball on this line when I move the slider. So as the line increases ball will also move on the line.
                  &lt;/p&gt;
  
                  &lt;div class="canOuterHdr" &gt;
                      &lt;canvas id="myCanvas4" width="300" height="195" style="position: relative;"&gt;
                          [No canvas support]
                      &lt;/canvas&gt;
  
                  &lt;/div&gt;
  
                  &lt;div id="slider4" class="newBg"&gt;
                      &lt;input id="slide4" type="range" min="0" max="100" step="1" value="0" onchange=" drawSlopeCurve1('slide4','100'); " /&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;!--/ canHdr4 --&gt;
  
          &lt;/div&gt;
          &lt;!-- /wrapper --&gt;
  
          &lt;script type="text/javascript"&gt;
              function counterSlider(sID) {
  
                  var slideVal = document.getElementById(sID).value;
                  /*if (maxValue ==100){
  
                   slideVal=slideVal/100;
                   }*/
                  slideVal = slideVal / 100;
                  var position = slideVal;
  
                  var startPt = {
                      x : 18.8,
                      y : 45
                  };
                  var controlPt = {
                      x : 28,
                      y : 160
                  };
                  var endPt = {
                      x : 228,
                      y : 165
                  };
                  var startPt2 = {
                      x : 20,
                      y : 75
                  };
                  var controlPt2 = {
                      x : 28,
                      y : 160
                  };
                  var endPt2 = {
                      x : 228,
                      y : 165
                  };
  
                  if (slideVal == 0) {
  
                      erase('myCanvas2');
                      erase('myCanvas3');
                      erase('myCanvas4');
                      //newSprite('myCanvas1b', 18.8, 45);
  
                      drawBezier2('myCanvas1', new Array({
                          x : 18.8,
                          y : 45
                      }, {
                          x : 28,
                          y : 160
                      }, {
                          x : 228,
                          y : 165
                      }), slideVal);
                      drawBezier2('myCanvas2', new Array({
                          x : 20,
                          y : 75
                      }, {
                          x : 28,
                          y : 160
                      }, {
                          x : 228,
                          y : 165
                      }), slideVal);
  
                  } else if (slideVal &gt; 0 &amp;&amp; slideVal &lt;= 34) {
  
                      erase('myCanvas1');
                      //erase('myCanvas1b');
                      erase('myCanvas2');
                      erase('myCanvas3');
                      erase('myCanvas4');
  
                      drawBezier2('myCanvas1', new Array({
                          x : 18.8,
                          y : 45
                      }, {
                          x : 28,
                          y : 160
                      }, {
                          x : 228,
                          y : 165
                      }), slideVal);
                      drawBezier2('myCanvas2', new Array({
                          x : 20,
                          y : 75
                      }, {
                          x : 28,
                          y : 160
                      }, {
                          x : 228,
                          y : 165
                      }), slideVal);
  
                      drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
                      drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
  
                  } else if (slideVal &gt; 34 &amp;&amp; slideVal &lt;= 67) {
  
                      erase('myCanvas1');
  
                      erase('myCanvas2');
                      erase('myCanvas3');
                      erase('myCanvas4');
  
                      drawBezier2('myCanvas1', new Array({
                          x : 18.8,
                          y : 45
                      }, {
                          x : 28,
                          y : 160
                      }, {
                          x : 228,
                          y : 165
                      }), slideVal);
                      drawBezier2('myCanvas2', new Array({
                          x : 20,
                          y : 75
                      }, {
                          x : 28,
                          y : 160
                      }, {
                          x : 228,
                          y : 165
                      }), slideVal);
  
                      drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
                      drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
  
                  } else if (slideVal &gt; 67 &amp;&amp; slideVal &lt;= 100) {
  
                      erase('myCanvas1');
  
                      erase('myCanvas2');
                      erase('myCanvas3');
                      erase('myCanvas4');
  
                      drawBezier2('myCanvas1', new Array({
                          x : 18.8,
                          y : 45
                      }, {
                          x : 28,
                          y : 160
                      }, {
                          x : 228,
                          y : 165
                      }), slideVal);
                      drawBezier2('myCanvas2', new Array({
                          x : 20,
                          y : 75
                      }, {
                          x : 28,
                          y : 160
                      }, {
                          x : 228,
                          y : 165
                      }), slideVal);
  
                      drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
                      drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
  
                  }
              }
  
              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 _getQBezierValue(t, p1, p2, p3) {
                  var iT = 1 - t;
                  return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
  
              }
  
              function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
                  return {
                      x : _getQBezierValue(position, startX, cpX, endX),
                      y : _getQBezierValue(position, startY, cpY, endY)
                  };
              }
  
              function drawNextPoint(canId, startPt, controlPt, endPt, position) {
                  var pt = getQuadraticCurvePoint(startPt.x, startPt.y, controlPt.x, controlPt.y, endPt.x, endPt.y, position);
                  position = (position + 0.006) % 1.0;
                  var canvas = document.getElementById(canId);
                  var ctx = canvas.getContext('2d');
                  //ctx.globalCompositeOperation = 'source-atop';
                  //ctx.globalCompositeOperation = "destination-over";
                  ctx.beginPath();
                  ctx.fillStyle = "#0077c1";
                  ctx.arc(pt.x, pt.y, 6, 0, Math.PI * 2, true);
                  ctx.closePath();
                  ctx.fill();
              }
  
              function newSprite(canId, mvx, mvy) {
                  var canvas = document.getElementById(canId);
                  var ctx = canvas.getContext('2d');
                  ctx.globalCompositeOperation = 'source-atop';
                  //ctx.globalCompositeOperation = "destination-over";
                  ctx.beginPath();
                  ctx.fillStyle = "#0077c1";
                  ctx.arc(mvx, mvy, 6, 0, Math.PI * 2, true);
                  ctx.closePath();
                  ctx.fill();
              }
  
              function drawBezier2(canId, points, slideVal) {
  
                  var canvas = document.getElementById(canId);
  
                  var context = canvas.getContext("2d");
                  //context.globalCompositeOperation = 'source-atop';
                  //context.strokeStyle = "rgb(113, 113, 213)";
                  context.strokeStyle = "#000";
                  context.lineWidth = 0.6;
                  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 drawSlopeCurve1(sID, maxValue) {
                  // erase('canvasTwo');
  
                  var canId = 'myCanvas4';
                  var slideVal = parseInt(document.getElementById(sID).value);
                  var canvas = document.getElementById(canId);
                  var context = canvas.getContext('2d');
                  canvas.width = canvas.width;
                  //line end points
                  x1 = 16;
                  y1 = 170;
                  x2 = 200;
                  y2 = 80;
  
                  //get slope (rise over run)
                  var m = (y2 - y1) / (x2 - x1);
                  //get y-intercept
                  var b = y1 - (m * x1);
                  //get distance between the two points
                  var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
                  //get new x and y values
                  var x = x1 + parseInt(distance / maxValue * slideVal);
                  var y = parseInt(m * x + b);
  
                  context.beginPath();
                  context.moveTo(x1, y1);
                  context.lineTo(x, y);
                  context.lineWidth = 0.6;
                  context.stroke();
              }
  
              function drawSlopeCurve2(sID, maxValue) {
                  // erase('canvasTwo');
  
                  var canId = 'myCanvas3';
                  var slideVal = parseInt(document.getElementById(sID).value);
                  var canvas = document.getElementById(canId);
                  var context = canvas.getContext('2d');
                  canvas.width = canvas.width;
                  //line end points
                  x1 = 16;
                  y1 = 170;
                  x2 = 160;
                  y2 = 72;
  
                  //get slope (rise over run)
                  var m = (y2 - y1) / (x2 - x1);
                  //get y-intercept
                  var b = y1 - (m * x1);
                  //get distance between the two points
                  var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
                  //get new x and y values
                  var x = x1 + parseInt(distance / maxValue * slideVal);
                  var y = parseInt(m * x + b);
  
                  context.beginPath();
                  context.moveTo(x1, y1);
                  context.lineTo(x, y);
                  context.lineWidth = 0.6;
                  context.stroke();
              }
  
          &lt;/script&gt;
      &lt;/form&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in Advance. my jsfiddle link:
  <a href="http://jsfiddle.net/g7hWD/1/" rel="nofollow">http://jsfiddle.net/g7hWD/1/</a></p>