How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?


Tags: javascript,css,html5,canvas,2d

Problem :

I am using this example to build my own progress bar that will keep track of the players fuel level in a game I am making.

HTML

<h1>Canvas Progress Bar Test</h1>
<form>
  <ul>
    <li>
      <input type="radio" name="direction" id="vertical" value="vertical" checked />
      <label for="vertical">Vertical</label>
      <input type="radio" name="direction" id="horizontal" value="horizontal" />
      <label for="horizontal">Horizontal</label>
    </li>

    <li>
      <label for="width">Width</label>
      <input type="number" id="width" value="20" />
    </li>
    <li>
      <label for="height">Height</label>
      <input id="height" type="number" value="200" />
    </li>
    <li>
      <label for="max">Max Value</label>
      <input id="max" type="number" value="100" />
    </li>
    <li>
      <label for="val">Value</label>
      <input id="val" type="number" value="20" />
    </li>
    <li>
      <input id="submit" type="submit" />
    </li>
  </ul>
</form>

<canvas id="canvas" width="500" height="500"><canvas>

JS

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

function drawScrollbar () {
  var width = parseInt($('#width').val()),
    height = parseInt($('#height').val()),
    max = parseInt($('#max').val()),
    val = Math.min(Math.max(parseInt(parseInt($('#val').val())), 0), max),
    direction = $('input[name="direction"]:checked').val();

  // Draw the background
  ctx.fillStyle = '#000';
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(0, 0, width, height);

  // Draw the fill
  ctx.fillStyle = '#777';
  var fillVal = Math.min(Math.max(val / max, 0), 1);
  if (direction === 'vertical') {
    ctx.fillRect(0, 0, width, fillVal * height);
  } else {
    ctx.fillRect(0, 0, fillVal * width, height);
  }
}

drawScrollbar();

$('#submit').click(function (e) {
  e.preventDefault();
  drawScrollbar();
});

CSS

h1 {
  font-size: 20px;
  margin: 5px 5px 10px;
}

input[type="number"], li {
  display: block;
  margin-bottom: 10px;
}

form {
  margin: 5px;
}

canvas {
  padding: 20px;
}

The problem

I need it to fill from the bottom going up instead of the top going down. How can I achieve this? I've tried rotating the canvas but I can't seem to get it to work.



Solution :

If i've understood your question, what you need to do is to start drawing the rectangle at a lower (that is, larger) y-value. More specifically at height - (fillVal * height)

Here's your method with the adjustment

...
// Draw the fill
  ctx.fillStyle = '#777';
  var fillVal = Math.min(Math.max(val / max, 0), 1);
  if (direction === 'vertical') {
    ctx.fillRect(0, height - (fillVal * height), width, fillVal * height);
  } else {
    ctx.fillRect(0, 0, fillVal * width, height);
  }
}
...

and a little fiddle


    CSS Howto..

    How do I add CSS font styles to PHP echos?

    how to change the CSS Class of the asp label dynamically based on its value

    How can I wrap a page with a centered DIV?

    How to toggle a div to slide up and down

    How to make a CSS Menu “Selected” with Hover Image Gallery Effect?

    How to make CSS compatible with all browsers?

    how to make changes permanently to css elements with -moz-transform?

    How to explain using browser.sleep in protractor

    How to combine jquery codes with similar functions?

    How To Put Values Dynamically

    How can I use a CSS transform to vertically-center two overlapping elements?

    Background-Image does not show properly on IE8

    Basic concept for how javascript replaces an html input with something interactive?

    How to target the chrome browser for Mac only?

    how to set CSS border-left outside of box

    How can I center the page to allow background on sides?

    How to set Safari print margins via CSS to print borderless

    Linked text a few lines below hamburger menu is not showing as linkified, but shows fine further down

    CSS Progress bar is out of place, how to keep it in place?

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    CSS and html: how to style input file in css (aline the text with the choose file button)?

    How to hide and show a
    onclick when there's already an action for click?

    How to make the effects of jQuery's $(element).css() persistent?

    How to make a CSS transform affect the flow of other elements

    In Firebug, how to tell what is overriding a style?

    How to add a style to