Canvas_Circle

by AlexJsh02

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- bootstrap responsive -->
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-5 col-sm-5">
      <div id="myCanvas" class="row" style="height: 600px; min-height: 600">
          <div class="col-xs-12 col-sm-12" style="display: inline-block; border: 1px solid red;">
            <canvas> <!-- width="100" height="100" style="width: 100; height: 100;"> -->
            <!-- Insert fallback content here --> 
            </canvas>
          </div>        
          <div class="col-xs-12 col-sm-12 center" style="display: inline-block; border: 1px solid black;">
              <h4 class="canvas-label">0</h4>
          </div>            
      </div>
    </div>
  </div>
</div>

CSS

#myCanvas {
  width: 400px;
  height: 600px;
}

#myCanvas > div > canvas {
  margin: 0 auto;
  vertical-align: middle;
  background-color: #ccc;
  display: inline-block;
  position: relative;
  /*
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  */
  width: 100%;
  height: 100%;
  margin-top: 10px;
}

.center {
  margin: 0 auto;
  vertical-align: middle;
  text-align: center;
}

JavaScript

//$(document).ready(function() {
	var $canvas = $("#myCanvas canvas");
  var	ctx = $canvas.get(0).getContext("2d");
  let $parentDiv = $canvas.closest("div");
	ctx.scale(0.5, 0.5);
  
	// set width, height
  let w = parseInt($parentDiv.get(0).offsetWidth);
  let h = w; //parseInt($parentDiv.get(0).offsetHeight);
  //alert('w: ' + w + ', h:' + h);
  //$canvas.attr('width', w).css('width', w);
	//$canvas.attr('height', h).css('height', h);
	
  var minutes=0;
  var minutesIncrement=0.334;
  var maxMinutes=45;
  var x = parseInt(w * 0.5);
  var y = parseInt(h * 0.5);
  var strokeWidth = parseInt(x * 0.7);
  var labelText = "Documents - Ready: ";
  
	
  // Draw a circle
  animate();
  
function animate() {
  
  minutes+=minutesIncrement;
  fillWedge(ctx, x, y, x, minutesToAngle(0), minutesToAngle(minutes), "rgb(255, 125, 0)");
  // Start the path doughnut-hole
  //ctx.beginPath();
  //ctx.arc(x, y, strokeWidth, 0, Math.PI*2, false);  
  //ctx.closePath(); // Close the path
  //ctx.fillStyle = "rgb(255, 255, 255)";
  //ctx.fill();
  $("#myCanvas .canvas-label").text(labelText + parseInt(minutes).toString());
  if (minutes<maxMinutes){
		requestAnimationFrame(animate); // Fill the path
  }
}

function fillWedge(context,cx,cy,radius,startAngle,endAngle,fillcolor){
  context.strokeStyle=fillcolor;
  context.linewWidth=8;
  //context.moveTo(cx,cy);
  context.beginPath();
  context.arc(cx,cy,radius,startAngle,endAngle);
  //context.closePath();
  //context.fillStyle=fillcolor;
  //context.fill();
  context.stroke();
}

function minutesToAngle(minutes){
  var twelveOClock=-Math.PI/2;
  var fullCircle=Math.PI*2;
  return(twelveOClock+fullCircle*(minutes/60));
}