StackOverflow_16812923: html5-canvas-move-object-on-line

Illustration of answer to http://stackoverflow.com/questions/16812923/html5-canvas-move-object-on-line.

by ExpertSystem

HTML

<!-- wrapper -->
    <div class="wrapper">
        <!-- canHdr -->
        <div id="canHdr" class="canHdr">
            <p>This is my 1st div with bezier curve the curve is getting drawn as slider moves and also a ball in moving on that .</p>
            <div class="canOuterHdr">
                <canvas id="myCanvas1" width="300" height="195" style="position: relative;">[No canvas support]</canvas>
            </div>
            <div id="slider1" class="newBg">
                <input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide1');" />
            </div>
        </div>
        <!--/ canHdr -->
        <!-- canHdr2 -->
        <div id="canHdr2" class="canHdr">
            <p>This is my 2nd div</p>
            <div class="canOuterHdr">
                <canvas id="myCanvas2" width="300" height="195" style="position: relative;">[No canvas support]</canvas>
            </div>
            <div id="slider2" class="newBg">
                <input id="slide2" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide2');" />
            </div>
        </div>
        <!-- canHdr2 -->
        <!-- canHdr3 -->
        <div id="canHdr3" class="canHdr">
            <p>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.</p>
            <div class="canOuterHdr">
                <canvas id="myCanvas3" width="300" height="195" style="position: relative;">[No canvas support]</canvas>
            </div>
            <div id="slider3" class="newBg">
                <input id="slide3" type="range" min="0" max="100" step="1" value="0" onchange=" drawSlopeCurve2('slide3','100'); " />
            </div>
        </div>
        <!--/ canHdr3 -->
        <!-- canHdr4 -->
        <div id="canHdr4" class="canHdr">
            <p>This is my 4th div with slanting line. I want to move a ball on this line when I move the...

CSS

.wrapper {
     margin: 0 auto;
     width: 1000px;
 }
 .canHdr {
     float: left;
     width: 450px;
     height: 400px;
     border: 1px solid red;
 }

JavaScript

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 > 0 && slideVal <= 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 > 34 && slideVal <= 67) {

       ...