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 to change html content text

    using css

    How to get CSS class property in Javascript?

    how to put 2 css elements in the same row (one next to each other)?

    Yahoo news CSS, how to achieve behavior

    How to set width of all elements in a table column with CSS

    How to style DOM element with CSS that was created with JavaScript function

    How can we create custom style for Jquery-ui dialog window in PHP?

    How to use Bootstrap 3 gradient for background in CSS? [closed]

    How do I make my lightbox not scroll?

    How can i select the div from CSS?

    Foundation 5-How to center position the class 'row' regardless the browser size?

    How to disable mask on selected image in the f/ckeditor in webkit, opera browsers?

    How to add box-shadow to a CSS div with display:table-row? [duplicate]

    How to make an image appear over another image when mouse hovers with css3?

    Showing a demo of my CSS on any website

    Hide one div when showing another with JavaScript

    How can I make a button apply a class to the next div in the document flow?

    CSS Web fonts how to use it with use of @font-face its not working

    How to change text-selection styles with javascript [duplicate]

    How can I make a div height automatically fit screen and expands if the content exceeds height

    How do I load a CSS file with HTMLTextWriter

    How to add all li of existing ul to the bottom of another ul base on their css classes

    How to make a very simple coloured 1-line text area?

    How to create custom horizontal radio buttons with CSS?

    How to make scrollable table's header fixed using css fixed position property?

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to fixed image on every screen resolution?

    How can I make my header fade out/disappear on scroll down and reappear on scroll up?

    How to apply gradient to element with correctly display in IE9?

    Understanding how menus work in html5 and css3