Canvas How to - Control bezier Curve with Slider

Question

We would like to know how to control bezier Curve with Slider.

Answer


<!-- ww  w .ja v  a  2  s.c om-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(window).load(function(){
    //Works in chrome & safari
    draw(100);
      $('#range').on('change', function(){
        range = parseInt($(this).val());
        draw(100-range)
      })
      function draw(val){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d'),
            x = 100,
            y = 100,
            cp1x = x/2,
            cp2x = y/2,
            cp1y = val,
            cp2y = val;
    context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.lineWidth = 1;
        context.moveTo(25 , x);
        context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
        
        context.strokeStyle = 'black';
        context.stroke();
      }
});
</script>
</head>
<body>
  <label>Range :</label>
  <input type="range" name="points" value="0" min="0" step="1" max="100"
    id="range">
  <canvas id="myCanvas" width="578" height="250"></canvas>
</body>
</html>

The code above is rendered as follows: