Circle Input with Canvas

Simple Canvas

by darkyen

HTML

<canvas class="circular_scroller" width="100" height="100" data-val="4" data-max="20" data-min="0" >
</canvas>

CSS

html{
    background:#070707;
}

JavaScript

var imd = null,
    Pi = Math.PI,
    twoPi = Pi * 2 ,
    PiBy16 = Pi / 16;
function Draw(ctx,min,max,angle,val){
 var angular_wid= ( twoPi )  / (max - min) ; // So that the scroller is nice
    if(angle === null){
     angle = twoPi * ( val / (max - min));
    }
    angular_wid =  ( angular_wid > PiBy16)? angular_wid : PiBy16;
    ctx.putImageData(imd,0,0);
    ctx.beginPath();
    ctx.strokeStyle = 'rgba(17,217,255,0.6)';
    ctx.lineWidth = 0.6;
    ctx.arc(50,50,40,0,twoPi,false);
    ctx.stroke();
    ctx.beginPath();
    ctx.lineWidth = 8;
    ctx.strokeStyle = 'rgba(17,217,255,0.8)';
    ctx.arc(50,50,40,angle-angular_wid,angle+angular_wid,false);
    ctx.stroke();
    ctx.fillText(val,40,60);
};

var c_scrollers = document.getElementsByClassName('circular_scroller');
    
   for(var i = 0; i < c_scrollers.length; i++){
      
      var ele = c_scrollers[i];
      ctx = ele.getContext('2d');
      imd = ctx.getImageData(0,0,100,100);
      ctx.font = '20px Tahoma';
      ctx.fillStyle = '#ffffff';
      Draw(ctx,ele.dataset.min,ele.dataset.max,null,ele.dataset.val);
      ele.addEventListener('mousedown',function(e){
          var that = this,
              max = this.dataset.max*1 || 100,
              min = this.dataset.min*1 || 0,
              val = this.dataset.val*1 || 0,
              ctx = this.getContext('2d');
              Draw(ctx,min,max,null,val);
          function end(e){
           document.removeEventListener('mousemove',movement);
           document.removeEventListener('mouseup',end);
          }
          function movement(e){
              e.preventDefault();
              e.stopPropagation();
              var off = {
                      left:that.offsetLeft,
                      top:that.offsetTop                  
                  }
                  off.left += 50;
                  off.top  += 50;
              var angle = Math.atan2( off.top -  e.clientY  , off.left - e.clientX );    
              angle += Pi ;
           ...