Graph Chart Slider for Custom path Display

HTML

<script src="https://raw.github.com/fryn/html5slider/master/html5slider.js"></script>
<canvas id="canvas" width="400" height="200" style="position: relative;">[No canvas]http://jsfiddle.net/achudars/RWycX/#tidy</canvas>
<br/>
<input id="slider" type="range" min="0" max="400" step="1" value="200" />

CSS

input[type=range] {
    width:400px
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var oy = 100;

function calc(x) {
    return oy + (50 * Math.sin(80 + x * 400));
}

function calc2(x) {
    return oy - 20 + (Math.pow(x * 400, .5)) / 5;
}

function calc3(x) {
    return Math.pow(x / 20, 2);
}

function calc4(x) {
    return (calc(x) + calc3(x)) / 2;
}
var slider = document.getElementById('slider');

function draw(getY, color) {
    ctx.strokeStyle = color;
    ctx.beginPath();
    var x = 0;
    var y = 0;
    var first = true;
    for (x = 0; x <= 400 && (x <= slider.value); x += 3) {
        y = getY(x);
        if (first) {
            ctx.moveTo(x, y);
            first = false;
        }
        ctx.lineTo(x, y);
    }
    ctx.stroke();
    ctx.closePath();
    newSprite(x, y)
}

function newSprite(mvx, mvy) {
    ctx.beginPath();
    ctx.fillStyle = "#0077c1";
    ctx.arc(mvx, mvy, 4, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

function change() {
    canvas.width = canvas.width;
    draw(calc, 'blue');
    draw(calc2, 'red');
    draw(calc3, 'green');
    draw(calc4, 'purple');
}
$(slider).change(change).change();
// slider update while sliding like in chrome:
var interval;
$(slider).mouseenter(function () {
    interval = setInterval(change, 50);
}).mouseleave(function () {
    clearInterval(interval);
})