How do i colour a rectangle in two colours js

Question

I have one rectangle that I want to fill with green and red, as a health bar for a game.

ctx.beginPath();
ctx.rect(this.x+5, this.y-15, 30, 3); // this.x/y are class members
ctx.strokeStyle="#000000";
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();
ctx.closePath();

Now this will give me a purely green rectangle, how can I make it so x percent of the rectangle is green and the rest is red?

Answer 1

I would simply draw another rectangle on top of the red rectangle, and move the x position according to the hp.

Answer 2

If you're interested in a pure HTML/CSS/JS solution, W3 Schools' How TO - JavaScript Progress Bar, is a published solution to a progress bar which is similar to what you are after.

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>
<br>
<button onclick="move()">Click Me</button> 

Answer 3

actually i dont really know the exact question, but hope this would help

if you want to send files to your own db you can use formData, it helps you to send it to server

about the attachment_id, i think you can use random string or simple counter to make your file has unique