% rectangle

by Sarah Giles

HTML

<html>

</html> <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
 
 
 
 
 
 </html>

JavaScript

// This is creates a rectangle that is dynamic in size based on % input
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
     var ctx = canvas.getContext('2d');

var canvasWidth=c.offsetWidth;
var canvasHeight=c.offsetHeight;

var levelPercent= .4;
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,canvasHeight-canvasHeight*levelPercent,canvasWidth,canvasHeight*levelPercent);
}
}