title: Control html5 canvas animation speed by jquery ui slider
body: <p>I'm trying to build a interactive html5 canvas animation. so i'm trying to control animation speed based on jquery ui slider value.
  <strong>when slider value changes automatically it will reflect in canvas animation</strong>.</p>
  
  <p>i'm beginner in jquery and canvas animation, so kindly describe possible way in code samples or reference materials.</p>
  
  <p><a href="http://codepen.io/rajumax/pen/gpopeY" rel="nofollow">Here is my link for codepen </a> </p>
  
  <pre><code>$(function() {
      $( "#slider" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.value );
        }
      });
      $( "#amount" ).val( $( "#slider" ).slider( "value" ) );
    });
  
  
  //canvas animation
  
   var canvas = document.getElementById("stage");
    var ctx = canvas.getContext("2d");
    var speed= 2;     // get jquery ui slider value 
  </code></pre>