CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Debbie V
Debbie V

Reputation: 324

html5 Canvas - FillRect() incorrectly draws the rectangle

I'm building a visualization of a 24 hour period with this bar. It starts at midnight on the left, and ends at midnight on the right.

The canvas width is 1440 = 24hrs * 60 minutes = 1 pixel per minute.

First, I fill the whole canvas with yellow, to signify daytime. Next, I add 4 hours at the beginning & end, to signify night time. That part works fine.

Next, I am trying to add an event that lasts 4 minutes, in blue. It should be a very small sliver, but it's huge.

What am I doing wrong???

https://jsfiddle.net/zuehejjm/

<html>
<canvas id="myCanvas" 
  width="1440" height="60"
  class="img-responsive"
  style="border:1px solid #000000;"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "yellow";
    ctx.fillRect(0,0,1440,60);

    ctx.fillStyle = "#eeeeee";
    ctx.fillRect(0,0,240,60);
    ctx.fillRect(1200,0,1440,60);

    ctx.fillStyle = "blue";
    ctx.fillRect(540,0,544,60);

</script>
</html>

Upvotes: 1

Views: 370

Answers (1)

jessegavin
jessegavin

Reputation: 75640

Check out the docs for fillRect()

fillRect(x, y, width, height)

You should use 4 instead of 544

ctx.fillRect(540, 0, 4, 60);

Upvotes: 5

Related Questions